Comments (0)
CSS
px
%
width: 500px; height: 500px; background: radial-gradient(circle at 50% 0%, rgb(69 228 255 / 0) 0%, 32.22%, rgb(58 117 189 / 1) 32.22%, 45.32%, rgb(69 168 255 / 0) 45.32%) 76px 319px / 46px 72px repeat repeat, /* Waves */ radial-gradient(circle at 50% 0%, rgb(69 228 255 / 0) 0%, 32.22%, rgb(58 117 189 / 1) 32.22%, 45.32%, rgb(69 168 255 / 0) 45.32%) 98px 283px / 46px 72px repeat repeat, /* Waves (Offset) */ linear-gradient(0deg, rgb(69 237 255 / 1) 0%, 50%, rgb(69 168 255 / 1) 100%) 0px 0px / 501px 502px no-repeat no-repeat; /* Background */

Waves 🌊

Yoav Kadosh

Water waves made from 2 circular gradients positioned in an offset

Colors

Views

2,275

Layers

3
Open in editor
Layers (3)
Waves
radial
Waves (Offset)
radial
Background
linear