Nested Circles

#root {
  width: 500px;
  height: 500px;
  background:
    radial-gradient(ellipse, transparent 40%, rgb(0 0 0 / 0.2) 49%, rgb(69 255 144) 50%, rgb(69 255 144) 64%, rgb(36 221 110) 65%, rgb(36 221 110) 79%, rgb(11 176 77) 80%, rgb(11 176 77) 100%) 0 0 / 100px 100px, /* Top Circles */
    radial-gradient(ellipse, transparent 40%, rgb(0 0 0 / 0.2) 45%, rgb(69 255 144) 50%, rgb(69 255 144) 64%, rgb(36 221 110) 65%, rgb(36 221 110) 79%, rgb(11 176 77) 80%, rgb(11 176 77) 100%) 50px 50px / 50px 50px, /* Bottom Circles */
    linear-gradient(45deg, rgb(138 212 255) 0%, rgb(0 79 125) 100%) 0 0 / 500px 500px no-repeat; /* Background */
}

Colors

Views

Code size

Layers

Explore

Community

Social