GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
linear-gradient(0deg, transparent 0%, rgb(255 255 255) 10.74%, rgb(255 255 255) 96.41%, transparent 100%) 58px 148px / 165px 38px no-repeat, /* Cloud */
radial-gradient(ellipse, rgb(255 255 255) 57.31%, transparent 64.53%) 150px 104px / 72px 66px no-repeat, /* Cloud */
radial-gradient(ellipse, rgb(255 255 255) 57.31%, transparent 64.53%) 179px 124px / 113px 66px no-repeat, /* Cloud */
radial-gradient(ellipse, rgb(255 255 255) 57.31%, transparent 64.53%) -5px 127px / 126px 63px no-repeat, /* Cloud */
radial-gradient(ellipse, rgb(255 255 255) 57.31%, transparent 64.53%) 76px 108px / 99px 63px no-repeat, /* Cloud */
linear-gradient(-90deg, transparent 0%, rgb(244 193 82 / 0.5) 14.73%, rgb(245 255 69 / 0.5) 52.3%, rgb(244 193 82 / 0.5) 86.02%, transparent 100%) 88px 299px / 336px 201px no-repeat, /* Sun Reflection */
linear-gradient(0deg, rgb(0 18 137) 0%, rgb(26 172 251) 96.78%, transparent 100%) 0 295px / 500px 206px no-repeat, /* Water */
radial-gradient(ellipse, rgb(245 255 69) 0%, rgb(244 193 82) 58.8%, transparent 67.4%) 89px 96px / 334px 335px no-repeat, /* Sun */
repeating-conic-gradient(transparent 0%, rgb(245 255 69 / 0.2) 0.91%, rgb(244 193 82 / 0.2) 3.09%, transparent 3.55%, transparent 5.26%) 0 0 / 500px 500px no-repeat, /* Rays */
linear-gradient(0deg, rgb(255 69 69) 0%, rgb(0 136 255) 100%) 0 0 / 500px 306px no-repeat; /* Sky */
} Comments (0)
Colors
Views
7,183
Code size
1.82 KB
Layers
10
<iframe
src="https://gra.dient.art/embed/ggu4968jj0"
title="Sunset By The Sea 🌅 | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (10)
Cloud
linear
Cloud
radial
Cloud
radial
Cloud
radial
Cloud
radial
Sun Reflection
linear
Water
linear
Sun
radial
Rays
conic
Sky
linear
GRADIENT
.ART
css