CSS Box Shadow Generator
Craft box shadows with sliders for offset, blur, spread and color, then copy the CSS.
How to use
Build a shadow
Move the sliders to adjust the horizontal offset, vertical offset, blur and spread. Choose a color and enable inset for an inner shadow.
- Adjust the four sliders.
- Pick a shadow color.
- Copy the generated box-shadow declaration.
Negative values
Offsets and spread accept negative values, which move the shadow up or left and shrink it.
Frequently asked questions
What is spread?
Spread expands or contracts the shadow before it is blurred. Positive values make the shadow larger.
Why is my shadow translucent?
The generated color includes partial transparency so the shadow blends with the background. Replace the color value if you want it fully opaque.
Related tools
Border Radius Generator
Preview and copy CSS border-radius values for each corner in pixels or percent.
CSS Gradient Generator
Design linear or radial CSS gradients with a live preview and copy-ready CSS.
CSS Formatter
Beautify CSS with one property per line and consistent indentation.
UUID / GUID Generator
Generate random version 4 UUIDs and copy them one by one or in bulk.
Hash Generator
Compute MD5, SHA-1, SHA-256 and SHA-512 digests of any text.
Timestamp Converter
Convert between Unix timestamps, ISO 8601 and human readable local dates.