Shadow Generator
Compose multi-layer CSS box-shadows visually. Each layer has independent offset X/Y, blur, spread, colour and an inset toggle. Apply Material elevation 0–5, neumorphic or glow presets, preview on a box, then copy the `box-shadow` declaration.
How to use
- 1
Pick a preset
Start from a Material elevation (0–5), neumorphic or glow preset to get a sensible baseline, then fine-tune.
- 2
Add or edit layers
Each layer has independent sliders for offset X/Y, blur and spread, plus a colour picker, alpha input and inset toggle. Add as many layers as you need.
- 3
Reorder layers
Use the up/down arrows on each card to reorder. The first layer in the list is the topmost in the CSS `box-shadow` stack.
- 4
Copy the CSS
Click “Copy CSS” to put the full `box-shadow` declaration on your clipboard, ready to paste into your stylesheet or inline style.
Common use cases
- Design Material-style elevation for cards, modals and popovers.
- Build neumorphic UI elements with paired light/dark shadows.
- Create glowing buttons and focus rings.
- Prototype multi-layer shadows for a component library.
Limitations
- Drop-shadows on text (the CSS `text-shadow` property) are not supported — only `box-shadow`.
- Colour alpha must be encoded in the colour value (rgba/hsla) — the colour picker outputs solid hex; use the colour text field for alpha.
- Material elevation presets are approximate translations from dp to px and may need tweaking for your density.
Frequently asked questions
Related tools
View allBorder Radius Playground
Visually design complex border-radius values.
CSS Gradient Generator
Build linear and radial CSS gradients visually.
Typography Scale Generator
Generate a modular typography scale.
Design Token Generator
Generate design tokens from a colour palette.