Radial gradient

Quick implementation

/* Centered glow */
.radial-glow {
  background: radial-gradient(circle,
    oklch(0.65 0.22 265),
    oklch(0.15 0.03 260)
  );
}

/* Off-center spotlight */
.radial-spotlight {
  background: radial-gradient(circle at 25% 25%,
    oklch(0.7 0.2 330),
    oklch(0.15 0.02 260)
  );
}

/* Vignette overlay */
.radial-vignette {
  background:
    radial-gradient(circle,
      oklch(0 0 0 / 0) 40%,
      oklch(0 0 0 / 0.8) 100%
    ),
    oklch(0.45 0.15 265);
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer creating background effects.

Goal: Use CSS radial-gradient to create spotlight, glow, and vignette effects.

Technical constraints:
- Use radial-gradient() with oklch() colors.
- Show three variants: centered circle, off-center spotlight (at 25% 25%), and vignette overlay.
- For the vignette, layer a transparent-to-dark radial gradient over a solid background.
- Use the "circle" keyword for perfect circles, or "ellipse" for viewport-proportional shapes.
- Specify the gradient center with "at X% Y%" syntax.

Edge cases:
- Radial gradients default to ellipse shape — use "circle" explicitly for round gradients.
- The gradient extends to the farthest corner by default — use closest-side or farthest-side for different sizing.
- Layering multiple radial gradients creates complex lighting effects.

Why this matters in 2026

Radial gradients create depth, focus, and atmosphere that linear gradients can't. A centered glow draws the eye to a hero section. An off-center spotlight adds drama to a card background. A vignette darkens the edges of an image, directing attention to the center. These effects used to require Photoshop — now they're a single CSS property that renders at any resolution.

The logic

radial-gradient(circle, color1, color2) creates a circular gradient radiating from the center outward. Adding at 25% 25% moves the center point to the upper-left area. For vignettes, layer a transparent-to-dark gradient over a solid color or image using the CSS multiple-backgrounds syntax — the first background listed is the top layer. The circle keyword forces a perfect circle regardless of the element's aspect ratio; ellipse (the default) stretches to match.

Accessibility & performance

Radial gradients are GPU-rendered with zero impact on layout or paint performance. For accessibility, ensure any text placed over a gradient has sufficient contrast at every point. Vignette overlays that darken edges can improve readability for text placed over images. Test contrast with WCAG tools at both the brightest and darkest areas of the gradient.