Topographic Lines

Quick implementation

.topographic-lines-demo {
  width: 100%;
  height: 12rem;
  border-radius: var(--radius);
  background-color: oklch(0.98 0 0);
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    oklch(0.98 0 0) 0%,
    oklch(0.98 0 0) 10%,
    oklch(0.5 0.1 140) 10%,
    oklch(0.5 0.1 140) 11%
  );
}

Prompt this to your LLM

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

Role: CSS Expert
Task: Create a topographic contour line background.
Constraints:
1. Use CSS only (no SVG, no images).
2. Use oklch() for all colors.
3. Use repeating-radial-gradient to create concentric rings.
4. Ensure the pattern is subtle and readable.
Output: Provide the CSS class and a demo container with style="width:100%".

Why this matters in 2026

This technique eliminates the need for external image assets for background textures, reducing page weight. It improves load times and simplifies maintenance by keeping all styling within the stylesheet.

The logic

The repeating-radial-gradient function draws concentric circles from a center point. Alternating transparent and colored stops create the contour lines that mimic elevation maps.

Accessibility & performance

The effect is purely visual and does not rely on motion, ensuring compatibility with reduced motion preferences. Contrast ratios should be checked to ensure text remains readable over the pattern.