box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);
(Tài liệu bằng tiếng Anh)
What it does
Designs layered CSS box-shadow values with live preview and copy-ready output. Each layer has the five standard properties - offset X, offset Y, blur, spread, color - plus an inset toggle and a 0-1 opacity slider whose value is composed into an rgba() color at build time. Stack as many layers as you need; they are comma-joined in output order, exactly as CSS expects.
Five one-click presets (Soft, Sharp, Elevated, Inner, Glow) replace the current layers with proven combinations - single-layer defaults plus a two-layer “Elevated” stack. The preview stage renders your shadow on a rounded box whose color you control, over a choice of plain, checker, or split backdrops for judging opacity. 100% client-side.
How to use it
- Click a preset in the toolbar to start from a known-good shadow, or edit the initial soft layer directly. Reset returns to the default single soft layer.
- In Stage, pick the preview Backdrop (Plain / Checker / Split) and set the Box color with the swatch picker.
- For each Layer section, tune the controls:
- Inset - draw the shadow inside the box instead of outside it.
- Color - the layer’s base color (swatch picker, hex).
- Offset X / Offset Y - position in pixels; negatives are valid.
- Blur - blur radius in pixels (min 0).
- Spread - expand or contract the shadow; negative values tighten it.
- Opacity - 0-1 slider, blended into the emitted
rgba()color.
- Click Add layer to stack another shadow (e.g. a tight contact shadow under a wide ambient one). Remove layers with the trash button on each section - the last layer cannot be removed.
- Watch the live preview update as you edit.
- Click Copy on the CSS output to grab the finished declaration.
Examples
Verified by running buildBoxShadow() from src/lib/boxShadow.ts on the exact layer values the five presets install:
Soft (also the tool’s initial state)
box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);Elevated - two layers, tight contact + wide ambient:
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 12px 28px -6px rgba(0,0,0,0.28);Inner
box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.35);Glow - colored, zero-offset shadow:
box-shadow: 0px 0px 24px 2px rgba(59,130,246,0.45);Sharp: box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);
Good to know
- Private: generation is local; nothing is uploaded.
- Layers are emitted comma-joined in list order - the first layer paints on top in CSS, so order matters visually.
- Opacity is applied per layer via
rgba(), so you can mix a heavy black contact shadow with a faint colored glow in one declaration. - The Split backdrop shows your shadow against both light and dark halves at once - the fastest way to check a shadow that must work on both themes.
- Negative spread (
-4px,-6pxin the presets) keeps a large blur from spilling past the box edges. - Related tools: CSS Gradient Generator, Glassmorphism Generator, Color Picker & Converter