Waves 🌊

Designed by
Yoav Kadosh

Keywords:

Colors:

Water waves made from 2 circular gradients positioned in an offset

Layers
3
Views
799
Open in Editor

Layers

Waves
(radial)
Waves (Offset)
(radial)
Background
(linear)

CSS

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