About CSS Box Shadow Generator
Generate CSS box shadows visually. Adjust offset, blur, spread, color, opacity. Copy CSS code. Free, no sign-up required.
How to use
- Drag the Horizontal Offset slider (-50 to 50px) to push the shadow left (negative) or right (positive). Drag Vertical Offset to push it up or down. For a natural light-from-above feel, keep horizontal near zero and vertical positive (light source overhead).
- Adjust the Blur Radius slider (0 to 100px) to soften the edge. Zero is a hard rectangular silhouette — good for retro and brutalist UI. Higher values feather the edge for ambient diffusion. Keep blur under 24px for performance-sensitive animated elements.
- Use the Spread slider (-50 to 50px) to expand or contract the shadow before blur is applied. Negative spread tightens to create thin halos; positive spread thickens for chunky drop-shadows or glow effects.
- Pick the shadow color and tweak its alpha — most material UI uses rgba(0,0,0,0.08 to 0.16). Pure black at full opacity reads as harsh; reduce alpha and add slight color tint (warm grey, deep navy) for a softer, more designed look.
- Toggle the Inset checkbox to draw the shadow inside the element instead of outside. Inset is essential for pressed-button states, sunken inputs, and inner glow effects on cards.
- Read the generated CSS in the output box and click the clipboard button to copy. For elevation systems, layer multiple shadows separated by commas (a tight low-blur shadow plus a softer high-blur shadow) — paste the copied snippet twice and edit by hand.
Examples
Material Design elevation 4dp
Two stacked shadows: 0 2px 4px rgba(0,0,0,0.14), 0 4px 5px rgba(0,0,0,0.12), 0 1px 10px rgba(0,0,0,0.20). The tight inner pair defines the edge while the soft outer one provides ambient depth. Stack them comma-separated on a single box-shadow declaration.
Soft card lift
0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06). This is the Tailwind shadow-md baseline — barely-there but enough to detach a card from the page. Doubles offsets and blur for hover states (shadow-lg).
Inset pressed button
inset 0 2px 4px rgba(0,0,0,0.20). Combine with a slightly darker background and remove any outer shadow to read as 'depressed.' Use in :active states for tactile feedback. Add a 1px lighter border on top for the rim-light effect.
Frequently asked questions
What is the syntax of the CSS box-shadow property?
The full form is: box-shadow: [inset]? ? ? ?. Offsets are required, blur and spread default to 0 if omitted, color defaults to currentColor. Multiple shadows are stacked by separating them with commas — the first listed paints on top. Example: box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.3).
When should I use box-shadow versus filter: drop-shadow()?
box-shadow draws around the element's bounding box (or border-radius shape) regardless of content. filter: drop-shadow() follows the actual rendered alpha — so a transparent PNG gets a shadow that hugs the visible pixels. Use box-shadow for cards, buttons, and rectangular UI; use drop-shadow for icons with cutouts, irregular SVG shapes, and PNG illustrations. drop-shadow does not support spread or inset and tends to be more expensive at runtime.
How do I build a Material Design or Tailwind-style elevation scale?
Stack two shadows: a tight low-y/low-blur layer for the contact edge, and a wider high-y/high-blur layer for the ambient cast. Increase both offsets and blur as elevation rises, and slightly decrease alpha (the lifted element loses contact darkness). Tailwind's six-step scale (sm, default, md, lg, xl, 2xl) is a good template — copy the values and tune the alpha for your background brightness.
Why does my shadow appear blurry on retina screens but crisp on standard ones?
Sub-pixel positioning. A 1px blur on a fractional offset (like 0.5px) gets anti-aliased at 1x but stays visible at 2x or 3x DPR. To keep shadows crisp, use integer offsets and blur values, and avoid 0px blur with non-integer offsets. For genuinely tight shadows, use a 1px blur instead of 0 — it is more forgiving across pixel ratios.
Are large blur radii a performance problem?
Yes, on animated elements. The browser allocates a buffer roughly the size of the element plus 2x the blur radius, then runs a Gaussian blur on every paint. A 100px blur on a transitioning element forces the GPU to redraw a large texture each frame. For animations, keep blur under 16px or promote the element to its own layer with will-change: transform and animate transform instead of properties that invalidate paint.
How do I keep focus rings visible when an element has a heavy shadow?
Use outline (which paints outside the box-shadow stack) or stack the focus ring as the first shadow in the comma list. Example: box-shadow: 0 0 0 3px rgba(66,153,225,0.6), 0 4px 8px rgba(0,0,0,0.2). Avoid outline: none without a replacement — keyboard users rely on it. The 3px ring is WCAG-compliant for visible focus indication.
Can box-shadow follow a non-rectangular shape?
It follows border-radius, so a circular element gets a circular shadow, a 50% radius pill gets a pill shadow, and a clipped path gets a rectangular shadow (clip-path is ignored by box-shadow). For arbitrary shapes, switch to filter: drop-shadow() on the parent or a wrapper SVG, which respects the alpha channel of children.
Part of ToolFluency’s library of free online tools for Developer Tools. No account needed, no data leaves your device.