LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.gradient {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 400px;
  height: 300px;
  margin: 10px;
}

.box {
  background: #333;
}

.box1 {
  background: #ccc url(https://mdn.mozillademos.org/files/11305/firefox.png) no-repeat bottom;
}

.box2 {
  background: url(https://mdn.mozillademos.org/files/11305/firefox.png) no-repeat bottom, -webkit-linear-gradient(top, purple, white);
}

.box3 {
  background: -webkit-linear-gradient(right bottom, yellow, red);
}

.box4 {
  background: -webkit-linear-gradient(left bottom, blue 50%, lightgreen 50%);
}

.box5 {
  background: -webkit-linear-gradient(bottom right, orange, purple);
}

.box6 {
  background: -webkit-linear-gradient(90deg, lightgreen, lightblue);
}

.box7 {
  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, #1e4b73, rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left, right;
}

.box8 {
  background: radial-gradient(ellipse, #fff, #ccc, #999, #666, #333, #000);
}

.box9 {
  background: radial-gradient(ellipse, #9ee1cd 10%, #319ba5 40%, #999 45%, #666, #333, #000);
}

.box10 {
  background: radial-gradient(ellipse 30% 20% at 30% 50%, #B90000, #2B0000);
}

.box11 {
  background: -webkit-linear-gradient(100deg, white 0%, white 35.009%, rgba(255, 255, 255, 0) 35.01%, rgba(255, 255, 255, 0) 100%), -webkit-linear-gradient(0deg, rgba(21, 182, 231, 0.47), rgba(22, 162, 200, 0.7));
  box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.5);
}

.box12 {
  background: radial-gradient(circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%), radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71%), radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71%) beige;
}

.box13 {
  background: -webkit-repeating-radial-gradient(ellipse, lightblue, yellow 10%, green 15%);
}

.box14 {
  background: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px);
}
Term
Thu, 02/22/2018 - 23:48

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv