Nested Circles

Designed by
Yoav Kadosh

Keywords:

Colors:

Layers
3
Views
180
Open in Editor

Layers

Top Circles
(radial)
Bottom Circles
(radial)
Background
(linear)

CSS

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