CSS & colour
CSS Box Shadow Generator
Shape a shadow with sliders and see the result on a card instantly. Stack several layers for the soft, realistic look used in modern interfaces, and copy the finished box-shadow rule.
Loading tool…
Preview
Preview
CSS
Presets
Shadow layers
Preview colours
How to use the CSS Box Shadow Generator
- Adjust offset, blur, spread, colour and opacity for the first layer.
- Add more layers for depth, or choose a preset as a starting point.
- Change the preview’s background and box colour to match your design.
- Copy the CSS.
Tips for better results
- Realistic shadows are usually two or three soft layers with low opacity, not one dark one.
- A larger blur with a negative spread creates a shadow that appears only on one side.
- Use inset for pressed or recessed effects.
Limitations you should know about
- Shadow rendering varies slightly between browsers, especially for very large blur values.
- Heavy layered shadows on many elements can slow scrolling on low-powered devices; test on real hardware.
Frequently asked questions
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius and colour. The optional keyword inset puts the shadow inside the box.
How do I add more than one shadow?
Separate shadows with commas. Add a layer in the tool and it writes the comma-separated list for you.
Does box-shadow follow rounded corners?
Yes, it follows the element’s border-radius.
Guides that use this tool
Related tools
- CSS Border Radius Generator Round corners evenly or individually, including elliptical shapes, and copy the CSS.
- CSS Gradient Generator Build linear, radial and conic gradients with multiple colour stops and copy the CSS.
- Color Palette Generator Build harmonious palettes from one colour, or extract the dominant colours from an image.