Vibrant OKLCH Conic Hero

For too long, the web has been trapped in the dull, muddy spectrum of sRGB. We accept “gray dead zones” in our gradients as a fact of life. No more. This hero section embraces the OKLCH color space to deliver vibrance that matches the human eye’s perception. It is not just a background; it is a radiant, high-definition light source that bathes your typography in pure energy.

Core Technique

The beauty of this snippet lies in its scientific approach to color rendering.

• OKLCH Supremacy: Unlike RGB, where mathematically mixing blue and yellow creates gray sludge, OKLCH interpolates colors based on perceptual lightness (L), chroma (C), and hue (H). This guarantees rich, vivid transitions.
• Conic Geometry: Instead of a flat linear wash, we use a conic-gradient. Anchored at 50% 100% (bottom center), it mimics a sunrise or a stage spotlight, directing the user’s gaze upward.
• Progressive Interpolation: The code intelligently checks for browser support (@supports). If the browser understands in oklab interpolation, it activates it via the --space variable, ensuring the smoothest possible gradient mixing available on the device.

Customization

The gradient is defined as a CSS variable, making it incredibly portable. You can shift the mood of the entire page by tweaking just a few hue angles.

Shifting the Horizon. Move the light source to create different lighting effects.

:root {
  --op-gradient: conic-gradient(
    /* Move 'at' to top-left for a corner flare */
    from 0deg at 0% 0% var(--space),
    /* ... colors ... */
  );
}

Creating a “Midnight” Theme. Replace the high-lightness OKLCH values with deeper tones while keeping high chroma.

:root {
  --op-gradient: conic-gradient(
    from 0deg at 50% 100% var(--space),
    oklch(15% 0.1 260) 0%,  /* Deep Blue */
    oklch(25% 0.2 280) 50%, /* Vivid Purple */
    oklch(10% 0.1 260) 100% /* Fade out */
  );
}

Browser Support

The code relies on modern color spaces (oklch) and gradients.