GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
--wave-color: rgb(58 117 189);
width: 500px;
height: 500px;
background:
radial-gradient(circle at 50% 0, transparent 0%, 32.22%, var(--wave-color) 32.22%, 45.32%, transparent 45.32%) 76px 319px / 46px 72px, /* Waves */
radial-gradient(circle at 50% 0, transparent 0%, 32.22%, var(--wave-color) 32.22%, 45.32%, transparent 45.32%) 98px 283px / 46px 72px, /* Waves (Offset) */
linear-gradient(0deg, rgb(69 237 255) 0%, 50%, rgb(69 168 255) 100%) 0 0 / 501px 502px no-repeat; /* Background */
} Comments (0)
Customize
Try different values. Your changes stay in this preview and never change the saved project.
#
Colors
Views
4,289
Code size
840 bytes
Layers
3
<iframe
src="https://gra.dient.art/embed/97d5007aut"
title="Waves 🌊 | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (3)
Waves
radial
Waves (Offset)
radial
Background
linear
GRADIENT
.ART
css