OKLCH colored shadow

Quick implementation

<!-- Markup Structure -->
<div class="card card--blue">
  <h3>Blue Card</h3>
</div>

/* CSS Pattern */
.card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  color: oklch(0.15 0 0);
}

/* Blue Example */
.card--blue {
  background-color: oklch(0.65 0.22 265);
  /* Match hue (265), lower lightness (0.45), add opacity */
  box-shadow: 0 10px 25px -5px oklch(0.45 0.15 265 / 0.4);
}

/* Red Example */
.card--red {
  background-color: oklch(0.65 0.2 25);
  /* Match hue (25), lower lightness (0.45), add opacity */
  box-shadow: 0 10px 25px -5px oklch(0.45 0.15 25 / 0.4);
}

/* Hover State */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 35px -5px oklch(0.45 0.15 265 / 0.5);
}

Prompt this to your LLM

Includes role, constraints, and framework variants.

Role: CSS color systems specialist.

Goal: Generate a CSS utility class that applies a "colored shadow" effect to a colored element.

Constraints:
1. Use oklch() for all color values.
2. The shadow must share the exact same hue as the background.
3. Never use rgba() or hsla() for the shadow color.
4. Adjust only the Lightness (L) channel to darken the shadow.
5. Include a :hover state that increases shadow opacity.

Framework Variants:
A) Vanilla CSS: Use CSS variables for hue and lightness.
B) Tailwind: Use arbitrary values for oklch() syntax.

Edge Cases:
1. Handling very light background colors (need significant L drop).
2. Ensuring text contrast remains high on colored backgrounds.
3. Accessibility compliance for color blindness.

Why this matters in 2026

The traditional approach to shadows—using rgba(0, 0, 0, 0.3)—often results in "muddy" or greyed-out visuals when applied to vibrant, colored elements. This is because standard RGB shadows lack hue information; they simply darken the underlying color, often desaturating it in the process. With oklch(), we can create "chromatic shadows" that maintain the color's vibrancy while providing depth. This technique is now standard in high-end design systems (like Apple's and Google's Material 3) to create a more cohesive, organic look where the shadow feels like a natural extension of the object's color.

The logic

The key to this effect lies in the structure of the oklch() function: oklch(L C H / A). To create a colored shadow, we keep the H (Hue) and C (Chroma) values identical to the background color. We then reduce the L (Lightness) value to create darkness. Finally, we use the alpha channel / A to control the shadow's opacity. This ensures that the shadow is a darker, semi-transparent version of the exact same color, rather than a generic grey overlay.

Accessibility & performance

From a performance standpoint, box-shadow is a composite-only property, meaning it does not trigger layout reflows or repaints, making it highly performant even on mobile devices. Regarding accessibility, colored shadows can sometimes reduce contrast for users with low vision if the shadow color is too similar to the background. It is crucial to ensure sufficient contrast between the text and the background color itself. Additionally, ensure that the hover state (which typically increases shadow size) does not cause layout shifts that might disorient users.