Create Stunning Wave Effects with Pure CSS, SVG, and Canvas

1. Introduction

Creating wave effects with pure CSS has long been considered difficult because drawing Bézier curves, which are required for smooth waves, is not directly supported by CSS.

Using pure CSS to achieve wave effects is no longer hard – CSS tricks.

2. Non‑CSS Implementations

SVG

With SVG you can easily draw a cubic Bézier curve.

Example:

Key code:

<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">

Canvas

Canvas uses the same principle, drawing a cubic Bézier curve with

ctx.bezierCurveTo()

and adding animation.

3. Pure CSS Wave Effect

Although CSS cannot draw Bézier curves directly, a clever trick uses a near‑50%

border-radius

to create an ellipse, then rotates it to simulate a wave.

Rotating the ellipse produces a wave‑like undulation:

The core CSS (SCSS) code is:

It uses

border-radius: 45%

for the ellipse,

overflow: hidden

to hide the part outside the viewport, and

transform

for rotation and scaling.

Note: the background stays blue while the white ellipse moves.

4. Pure CSS Wave Progress Chart

With the same technique you can build a wave‑filled progress indicator.

HTML structure:

Corresponding CSS (SCSS):

Resulting animation:

5. Tips for More Realistic Waves

Animate the

border-radius

value during the motion.

Apply slight

transform

translations and distortions.

Use multiple ellipses with different durations and opacity for depth.

6. Conclusion

The series of CSS articles is collected on the author’s GitHub: https://github.com/chokcoco/iCSS . The pure‑CSS approach lowers the learning curve compared to SVG or Canvas while still delivering attractive wave effects.