Skip to main content
CSS Tip

A CSS-only wavy shapes

How much code is needed to create a Wavy Shape?

Use an online generator to easily get the code: css-generators.com/wavy-shapes

A wavy shape

.wave {
--s: 50px; /* the size of the wave */
--p: .6; /* the curvature of the wave [0 2] */

--R: calc(var(--s)*sqrt(var(--p)*var(--p) + 1)) at 50%;
mask:
radial-gradient(var(--R) calc(100% - var(--s)*(1 + var(--p))), #000 99%, #0000 101%)
calc(50% - 2*var(--s)) 0/calc(4 * var(--s)),
radial-gradient(var(--R) calc(100% + var(--s)*var(--p)), #0000 99%, #000 101%)
50% calc(-1*var(--s))/calc(4 * var(--s)) repeat-x;
}

See the Pen CSS only wavy shape by Temani Afif (@t_afif) on CodePen.

More detail: css-tricks.com/how-to-create-wavy-shapes-patterns-in-css


More CSS Tips