radial-gradient

by kmouse

HTML

<div></div>
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
  margin: 5px;
  width: 200px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #bbb;
  float: left;
}
div:nth-child(4n + 1) {
  clear: left;
}

div:nth-child(1) {
  background: radial-gradient(red, yellow, green);
}
div:nth-child(2) {
  background: linear-gradient(red, yellow, green);
}
div:nth-child(3) {
  background: radial-gradient(closest-side at 20px 30px, red, yellow, green);
}
div:nth-child(4) {
  background: radial-gradient(closest-corner at 20px 30px, red, yellow, green);
}

div:nth-child(5) {
  background: radial-gradient(circle closest-corner at 200px 30px, red, yellow, green);
}
div:nth-child(6) {
  background: radial-gradient(ellipse 80% 8%, red 50%, yellow 50%, green);
}
div:nth-child(7) {
  background: radial-gradient(circle closest-side, red 50%, yellow 50%, green);
}
div:nth-child(8) {
  background: repeating-radial-gradient(circle 30px, red, yellow, green 85%, red);
}

div:nth-child(9) {
  background: repeating-radial-gradient(red, yellow 20px, green 40px);
}
div:nth-child(10) {
  background: radial-gradient(red 50px, blue 80px, red 90px);
}
div:nth-child(11) {
  background: repeating-radial-gradient(red 50px, blue 80px, red 90px);
}
div:nth-child(12) {
  background: repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%);
}

div:nth-child(13) {
  background: repeating-radial-gradient(circle 30px, red -30px, yellow);
}
div:nth-child(14) {
  background: repeating-radial-gradient(circle 30px, red 15px, yellow);
}
div:nth-child(15) {
  background: repeating-radial-gradient(circle 20px, red, yellow, green 100%, yellow 150%, red 200%);
}
div:nth-child(16) {
  background:           radial-gradient(circle 20px, red, yellow, green 100%, yellow 150%, red 200%);
}


div:nth-child(17) {
	background: repeating-conic-gradient(gold, #f06 20deg);
}


@keyframes spinner {
	from { background: repeating-linear-gradient( 60deg, red, yellow, transparent, yellow, red), red}
	to   { background:...