Snippets / Layout /

Decorative blend effect

Layered gradients with background-blend-mode and oklch() for atmospheric cards.

Morning mist

screen blend mode

Twilight

overlay blend mode

Widely supported

layoutcolorno-js

Quick implementation

/* HTML: <div class="blend-card"></div> */

.blend-card {
  /* Layer 1: radial gradient (top-left glow) */
  /* Layer 2: radial gradient (bottom-right glow) */
  /* Layer 3: base gradient */
  background:
    radial-gradient(circle at 30% 30%, oklch(0.7 0.18 280 / 0.8), transparent 60%),
    radial-gradient(circle at 70% 70%, oklch(0.6 0.22 320 / 0.75), transparent 55%),
    linear-gradient(135deg, oklch(0.25 0.04 260), oklch(0.2 0.03 280));

  /* Blend the layers together */
  background-blend-mode: screen;

  /* Surface styling */
  border-radius: 1rem;
  border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.25);
}

/* Alternative: use overlay for richer saturation */
.blend-card--overlay {
  background-blend-mode: overlay;
}

Prompt this to your LLM

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

You are a senior frontend engineer specializing in modern CSS.

Goal: Create a decorative card with layered gradient blends using background-blend-mode.

Technical constraints:
- Use background-blend-mode with at least 3 gradient layers (2 radial + 1 linear).
- Use oklch() for all colors — no hex, no rgba(), no hsl().
- The base gradient should be dark (oklch lightness < 0.3) for contrast.
- Radial gradients should use alpha transparency to create glow effects.
- Include a subtle border in oklch(1 0 0 / 0.12) for definition.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept `children`, `className`, and `blendMode` prop ("screen" | "overlay" | "multiply").

Edge cases to handle:
- Provide a fallback for browsers without background-blend-mode support using @supports.
- Handle prefers-reduced-motion by removing any animated gradient shifts.
- Ensure text on top maintains WCAG AA contrast (use white text on dark blended backgrounds).

Return HTML + CSS with clear layer comments.

Why this matters in 2026

Decorative backgrounds used to require SVG files or image assets. Now background-blend-mode lets you composite multiple gradients in a single background property, creating complex atmospheric effects with zero HTTP requests. Combined with oklch(), you get perceptually consistent colors that work in both light and dark mode without media queries.

This technique replaces the old "background image + overlay div" pattern, collapsing it into one element with one property.

The logic

Multiple gradients in background are stacked: the first listed is on top. background-blend-mode defines how each layer composites with the ones below it. screen brightens (good for glows), overlay boosts saturation and contrast, multiply darkens.

oklch() with alpha — oklch(0.7 0.18 280 / 0.8) is a vibrant purple at 80% opacity. As it blends with layers below, the alpha creates soft transitions. The dark base (oklch(0.25 0.04 260)) ensures the result stays readable for text overlays.

Accessibility & performance

Text over blended backgrounds must pass contrast ratios. Test with your actual content — if the blend gets too bright, reduce alpha or shift the base gradient darker. background-blend-mode is GPU-accelerated and cheap to render. No animation means no motion concerns, but if you animate gradient positions, wrap in @media (prefers-reduced-motion: reduce).

Tip: screen blend mode works best for light-on-dark designs. Use multiply for dark-on-light.