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