Wave pattern

Quick implementation

.wave-pattern {
  background-color: oklch(0.18 0.04 220);
  background-image:
    radial-gradient(
      ellipse 100% 60% at 50% 100%,
      oklch(0.55 0.18 210) 50%,
      transparent 51%
    ),
    radial-gradient(
      ellipse 100% 60% at 50% 100%,
      oklch(0.45 0.15 230) 50%,
      transparent 51%
    );
  background-size: 3rem 2rem, 3rem 2rem;
  background-position: 0 0, 1.5rem 1rem;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a CSS pattern library.

Goal: A pure CSS repeating wave/scallop background pattern — no SVG, no images, no JavaScript.

Technical constraints:
- Use radial-gradient with ellipse shape, anchored at 50% 100%, to produce a scallop arc.
- Tile with background-size so the pattern repeats seamlessly across the full element.
- Offset a second gradient layer by half the tile width and full tile height to interlock the waves.
- Use oklch() for all colors — no hex or rgba().
- Ensure the pattern works on any background-color as the base.

Framework variant (pick one):
A) Vanilla CSS utility class applicable to any block element.
B) React component — accept tileSize, waveColor, and bgColor as optional props.

Edge cases to handle:
- Pattern must tile seamlessly with no visible seam at tile edges.
- Should degrade gracefully in browsers that do not support oklch() (fallback solid color).
- Avoid background-attachment: fixed — the pattern should scroll with content.

Return CSS.

Why this matters in 2026

CSS-only decorative backgrounds eliminate HTTP requests for texture images and scale perfectly at any resolution. Wave and scallop patterns have become staples in modern UI — used in hero sections, card dividers, and section breaks. Building them from radial-gradient means zero external dependencies and full color-system integration.

The logic

Each wave arc is a radial-gradient with an ellipse shape anchored to the bottom centre of its tile (at 50% 100%). The gradient fills the ellipse with a solid color up to the 50% radius stop, then becomes transparent — producing a dome shape. Two gradient layers share the same background-size but the second is offset by half the tile width and the full tile height via background-position, interleaving the domes into a continuous wave row. The background-color beneath provides the valley color between peaks.

Accessibility & performance

Purely decorative backgrounds should carry no semantic meaning — never rely solely on this pattern to convey information. CSS gradients are rendered on the GPU and do not trigger additional network requests, making them fast to paint. If the wave pattern produces insufficient contrast against overlaid text, add a semi-transparent overlay layer or adjust the oklch() lightness values to maintain a WCAG AA contrast ratio.