CSS Box Shadow Generator
Design layered shadows and copy the CSS.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Adjust horizontal and vertical offset, blur, spread, colour and inset in real time, with a preview card on a neutral background. The generated CSS can be copied as a single declaration or as a reusable custom property.
How to use it
- Move the sliders until the shadow reads correctly.
- Set the colour and opacity.
- Copy the box-shadow declaration.
Frequently asked questions
Why do soft shadows look grey?
Black with low opacity over a light surface greys the edge. Using a tinted colour, such as the background hue, looks more natural.
How do I get a layered shadow?
Add two declarations separated by a comma: a tight one for contact, a wider one for depth.
Keep going
Related tools
CSS Border Radius Generator
Shape corners with independent radii and copy the CSS.
CSS Gradient Generator
Build linear and radial gradients with copy-ready CSS.
CSS Flexbox Playground
Learn and copy flexbox layout code visually.
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.