Comments (1)
Yoav Kadosh
7 months ago
Wow! This looks almost like a photo
CSS
width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0) 0%, rgba(10,27,44,0.82) 35.42%, rgba(10,27,44,1) 63.54%) 0px 250px / 500px 250px no-repeat no-repeat, /* Vignette */
repeating-linear-gradient(0deg, rgba(55,78,112,0) 0.09%, rgba(55,78,112,0.66) 9.81%, rgba(55,78,112,0.74) 14.24%, rgba(55,78,112,0) 21.88%, rgba(55,78,112,0) 25%) 0px 250px / 500px 250px no-repeat no-repeat, /* Vignette (copy) */
radial-gradient(circle at 50% 0%, rgba(255,239,186,0.86) 0%, rgba(0,0,0,0) 100%) 0px 250px / 500px 250px no-repeat no-repeat, /* ripples reflects */
repeating-conic-gradient(from 0deg at 50% 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0.62) 3.47%, rgba(0,0,0,0) 7.18%, rgba(250,160,160,0.89) 14.47%, rgba(0,0,0,0) 23.96%, rgba(255,149,149,0.54) 28.01%, rgba(0,0,0,0) 33.33%, rgba(0,0,0,0) 33.33%) 0px 250px / 500px 250px no-repeat no-repeat, /* ripples surface */
linear-gradient(0deg, rgba(132,194,248,1) 0%, rgba(55,78,112,1) 72.92%, rgba(0,48,91,1) 100%) 0px 250px / 500px 250px no-repeat no-repeat, /* Sea */
radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 5%, rgba(255,245,0,0.56) 7%, rgba(255,214,0,0.25) 35%, rgba(255,0,0,0) 72.22%) 0px 0px / 500px 500px no-repeat no-repeat, /* Sun */
linear-gradient(0deg, rgba(255,206,166,1) 0%, 50%, rgba(59,103,141,1) 100%) 0px 0px / 500px 250px no-repeat no-repeat; /* sky */
Layers (7)
Vignette
radial
Vignette (copy)
linear
ripples reflects
radial
ripples surface
conic
Sea
linear
Sun
radial
sky
linear
GRADIENT
.ART
css