Home / Snippets / Color & Theming /
OKLCH shadow
Colored, layered box-shadows using oklch() alpha for depth that matches your palette.
Quick implementation
/* Two-layer colored shadow — adjust hue to match your palette */
.card {
box-shadow:
0 4px 6px oklch(0.45 0.2 265 / 0.3), /* tight, strong */
0 12px 24px oklch(0.45 0.2 265 / 0.15); /* wide, subtle */
}
/* Shadow scale: sm, md, lg */
--shadow-color: 265; /* hue angle */
.shadow-sm {
box-shadow: 0 1px 3px oklch(0.3 0.1 var(--shadow-color) / 0.2);
}
.shadow-md {
box-shadow:
0 4px 6px oklch(0.35 0.15 var(--shadow-color) / 0.25),
0 10px 20px oklch(0.35 0.15 var(--shadow-color) / 0.12);
}
.shadow-lg {
box-shadow:
0 8px 16px oklch(0.4 0.2 var(--shadow-color) / 0.3),
0 24px 48px oklch(0.4 0.2 var(--shadow-color) / 0.15);
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a shadow system for a design system.
Goal: Create a 3-tier shadow scale (sm, md, lg) using colored oklch() shadows that can be tinted to any palette hue.
Technical constraints:
- Use oklch() with alpha for all shadow colors — e.g. oklch(0.45 0.2 265 / 0.3).
- Each tier uses two layered shadows: a tight sharp one and a wide diffuse one.
- Store the hue in a --shadow-color custom property for easy re-theming.
- Lightness should be low (0.3–0.45) so shadows work on dark backgrounds.
- Chroma should be moderate (0.1–0.2) for visible tinting without overwhelming.
- Use oklch() for all color values, not hex or rgba().
Framework variant (pick one):
A) Vanilla CSS custom properties — shadow-sm, shadow-md, shadow-lg classes.
B) Tailwind v4 — extend @theme with colored shadow utilities.
Edge cases to handle:
- Light backgrounds: increase alpha or lightness for visible shadows.
- Dark backgrounds: pure black shadows disappear — tinted shadows maintain visibility.
- Nested shadows: inner elements with shadows should not fight outer element shadows.
- Transition: animating box-shadow between tiers should use transition: box-shadow 0.2s.
Return CSS custom properties.Why this matters in 2026
Generic gray shadows look flat and disconnected from your color palette. Tinting shadows with your brand's hue angle creates cohesive depth — a blue-tinted shadow under a blue button feels intentional, not generic. oklch() makes this trivial: keep the hue, lower the lightness to 0.3–0.45, and add alpha for transparency. One custom property change re-themes every shadow in your system.
The logic
Each shadow uses two layers: a tight layer (small offset, low blur) for the sharp edge shadow, and a wide layer (larger offset, high blur) for the ambient glow. Using oklch() with alpha (the / 0.3 syntax) gives you perceptually uniform shadow colors — a shadow at hue 265 and one at hue 50 will have the same perceived intensity at the same alpha. The --shadow-color custom property stores just the hue angle, making it trivial to re-theme.
Accessibility & performance
Shadows are purely decorative and invisible to screen readers. The key performance consideration is that box-shadow is a paint-only property — it doesn't trigger layout recalculation, but it does cause repainting. For shadows that change on hover, this is fine. For shadows that animate continuously (like a pulsing glow), consider using filter: drop-shadow() on a pseudo-element with will-change: filter to promote it to its own compositor layer.