CSS Box Shadow Generator
Compose single or layered box-shadows with sliders and a live preview.
Shadows
What is this tool?
The CSS box-shadow property controls soft elevation and depth. This tool exposes offset, blur, spread, color, and inset for one or more shadows so you can stack layers and copy the final declaration.
How to use it
- Adjust sliders for each shadow layer.
- Add more shadows for layered depth, or enable inset.
- Copy the box-shadow CSS when it looks right.
Related design tools
- Color ConverterConvert between HEX, RGB, HSL, and HSB/HSV with a live swatch.
- CSS Gradient GeneratorBuild linear or radial gradients with multiple stops and copy CSS.
- CSS Border Radius GeneratorControl each corner’s radius and copy the CSS.
- Favicon GeneratorUpload an image and export standard favicon PNG sizes (and a ZIP).