Tool 05 — CSS

Shadow & Elevation Studio

Smooth multi-layer shadows — the technique behind Stripe, Vercel, and Apple. Pick a preset or dial in custom parameters. Add a hover state and see it live in the preview. OKLCH color tinting, elevation token system, and four export formats.

Deeper Dive
Smooth CSS shadows: the multi-layer technique→

Shadow & Elevation Studio

Hover to preview
Background
① Shadow
Smooth 4-layer shadow — natural diffusion, minimal visual noise
② Hover State
Off
Toggle on above — then hover over the preview card to see the effect live.
③ Shadow Color & OKLCH Tint
Base color
Tint color
Shifts shadow hue in OKLCH — like iOS colored shadows
Tint amount
0%
CSS Output 
 
 
  
 
    
Why multi-layer shadows look better
A single box-shadow with a large blur radius produces an unrealistic, flat halo that does not match how light and shadow behave physically. Real objects cast two overlapping shadows: a larger, softer ambient shadow from indirect lighting, and a smaller, denser contact shadow where the object is closest to the surface. Stacking these two layers in CSS — typically using a comma-separated box-shadow value — produces a shadow that reads as genuinely elevated rather than visually pasted on. This is the approach used by Google's Material Design, Apple's Human Interface Guidelines and most sophisticated modern design systems.
Building a CSS elevation system
An elevation system defines a fixed set of shadow levels — typically five (none, low, medium, high, highest) — used consistently across all UI components. Cards might sit at elevation-2, modals at elevation-4, dropdowns at elevation-3. By defining shadows as CSS custom properties (--shadow-1 through --shadow-5), you create a single source of truth that can be updated globally. This tool generates the full five-level system in one step, with each level calibrated so shadows visually step in equal perceptual increments rather than arbitrary pixel values.
OKLCH shadow tinting
Most box shadows use rgba(0, 0, 0, 0.x) — a pure black with variable opacity. OKLCH tinting instead derives the shadow color from your surface or background hue, slightly darkening and desaturating it while preserving the color temperature. The result is shadows that feel warmer on warm-toned surfaces and cooler on cool-toned ones — a subtle effect that makes interfaces feel more cohesive. This technique is used in Figma's auto-generated shadows, Tailwind's shadow palette, and most premium SaaS UI kits.
 
 Advertisement  uicorn — fabled tools for designers and art directors uicorn — fabled tools for designers and art directors  
 
Frequently asked questions
How many box-shadow layers should I use?
Two layers is the standard for production — an ambient shadow and a contact shadow. Three layers can be used for very high elevation (modals, bottom sheets) to add a narrow specular highlight layer. More than three layers rarely adds perceptible quality and increases CSS payload.
What is the difference between box-shadow and drop-shadow()?
box-shadow follows the rectangular bounding box of the element, including any background. filter: drop-shadow() follows the rendered shape, including transparency — so it traces around an SVG icon or a PNG with a transparent background. Use box-shadow for UI cards and surfaces; use filter: drop-shadow() for icons, cut-out images and SVGs.
Can I use these shadows in Tailwind CSS?
Yes. The tool exports a Tailwind configuration object with custom shadow values that you can paste directly into the extend.boxShadow section of your tailwind.config.js.
Why do my shadows look different in dark mode?
Dark backgrounds make black shadows nearly invisible. In dark mode, use very low opacity shadows or replace them with a subtle border and inner glow instead. Elevation in dark mode is often better communicated through surface lightness (higher elevation = slightly lighter surface) rather than shadow depth.
What is an inset box shadow?
An inset shadow is drawn inside the element's border rather than outside. It is used to create pressed or recessed states, inner bevels and well effects. Add the keyword inset before the shadow values in CSS.
 
Related tools
 
 Advertisement  uicorn — fabled tools for designers and art directors uicorn — fabled tools for designers and art directors  
 
  
 
 
Disclaimer — Tool 05 · Shadow & Elevation Studio
 
 
Smooth Shadow Technique
Multi-layer shadows distribute blur and opacity across several CSS layers for perceptually smoother results than a single layer. Rendering cost scales with layer count — 6-layer shadows on many elements may affect performance on low-end devices.
 
OKLCH Tinting
Shadow color tinting uses OKLCH mathematics to shift the shadow hue toward an accent color. Works best at 0–40% tint on light backgrounds. High values on dark backgrounds may produce unexpected color casts.
 
Elevation Scale
Generated token values scale exponentially from the current shadow parameters. Review and adjust to suit your specific design system before production use.
 
Liability
All outputs are provided without warranty of any kind, express or implied. uicorn and its operator accept no liability for any direct, indirect, or consequential loss or damage arising from the use of, or reliance on, this tool or its output. You are solely responsible for verifying all values before use in any professional, commercial, or production context.