GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 50% 0, transparent 0%, rgb(10 27 44 / 0.82) 35.42%, rgb(10 27 44) 63.54%) 0 250px / 500px 250px no-repeat, /* Vignette */
repeating-linear-gradient(0deg, transparent 0.09%, rgb(55 78 112 / 0.66) 9.81%, rgb(55 78 112 / 0.74) 14.24%, transparent 21.88%, transparent 25%) 0 250px / 500px 250px no-repeat, /* Vignette (copy) */
radial-gradient(circle at 50% 0, rgb(255 239 186 / 0.86) 0%, transparent 100%) 0 250px / 500px 250px no-repeat, /* ripples reflects */
repeating-conic-gradient(at 50% 0, transparent 0%, rgb(255 255 255 / 0.62) 3.47%, transparent 7.18%, rgb(250 160 160 / 0.89) 14.47%, transparent 23.96%, rgb(255 149 149 / 0.54) 28.01%, transparent 33.33%, transparent 33.33%) 0 250px / 500px 250px no-repeat, /* ripples surface */
linear-gradient(0deg, rgb(132 194 248) 0%, rgb(55 78 112) 72.92%, rgb(0 48 91) 100%) 0 250px / 500px 250px no-repeat, /* Sea */
radial-gradient(circle, rgb(255 255 255) 5%, rgb(255 245 0 / 0.56) 7%, rgb(255 214 0 / 0.25) 35%, transparent 72.22%) 0 0 / 500px 500px no-repeat, /* Sun */
linear-gradient(0deg, rgb(255 206 166) 0%, 50%, rgb(59 103 141) 100%) 0 0 / 500px 250px no-repeat; /* sky */
} Comments (1)
Yoav Kadosh
3 years ago
Wow! This looks almost like a photo
<iframe
src="https://gra.dient.art/embed/9qvc2606ee"
title="horizon | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (7)
Vignette
radial
Vignette (copy)
linear
ripples reflects
radial
ripples surface
conic
Sea
linear
Sun
radial
sky
linear
GRADIENT
.ART
css