LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Linear Gradients

Default
to top
70deg

Radial Gradients

closest-side
closest-corner
farthest-side
farthest-corner
circle
ellipse

Design & Code by AMAN

CSS
body {
  display: flex;
  justify-content: center;
  background: #333;
  color: #fff;
  font: 300 16px "Raleway", "Segoe UI";
  height: 90vh;
  text-align: center;
}
.container {
  position: absolute;
  top: 0;
}
p {
  color: #bbb;
  font-size: 80%;
  padding-top: 20px;
}
a {
  color: #03a9f4;
  text-decoration: none;
}
.item {
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 10px #222;
  padding: 5px;
}

.row1 {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px;
  grid-gap: 1em;
  margin-bottom: 2em;

  display: -ms-grid;
  -ms-grid-columns: 100px 1em 100px 1em 100px;
  -ms-grid-rows: 100px;
}
.default-linear-grad {
  background: linear-gradient(#783e9f, #03a9f4);
  -ms-grid-column: 3;
}

.linear-grad-to-top {
  background: linear-gradient(to top, #783e9f, #03a9f4);
  grid-row-start: 1;
}
.linear-grad-70-deg {
  background: linear-gradient(70deg, #783e9f, #03a9f4);
  -ms-grid-column: 5;
}

.row2 {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  grid-gap: 1em;

  display: -ms-grid;
  -ms-grid-columns: 100px 1em 100px 1em 100px;
  -ms-grid-rows: 100px 1em 100px;
}

.closest-side {
  background: radial-gradient(closest-side, #783e9f 0, #03a9f4 100%);
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.closest-corner {
  background: radial-gradient(closest-corner, #783e9f 0, #03a9f4 100%);
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.farthest-side {
  background: radial-gradient(
    farthest-side at 50% 100%,
    #783e9f 0,
    #03a9f4 100%
  );
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.farthest-corner {
  background: radial-gradient(farthest-corner at 50% 100%, #783e9f, #03a9f4);
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.circle {
  background: radial-gradient(circle, #783e9f 0, #03a9f4 100%);
  grid-row-start: 1;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.ellipse {
  background: radial-gradient(ellipse at 50% 50%, #783e9f 20%, #03a9f4 100%);
  grid-row-start: 1;
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
JS
// codepen.io/adsingh14

Description

Not tested on 'Safari'. :)
Term
Sat, 04/14/2018 - 20:49

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv