Skip to content
Categories
Box Shadow Generator
Generate a CSS box-shadow by specifying offset, blur, and color.
Overview
- Builds a CSS box-shadow property by specifying offset, blur, spread, color, and inset.
- Lets you adjust each value while watching a live preview, so you can create a shadow style while checking its actual appearance.
- The color field accepts not just HEX starting with #, but any CSS color value, such as rgba(), hsl(), or a color keyword, used as-is.
Usage
- Specify the horizontal and vertical offset, blur radius, spread radius, and color.
- Check "Inset" if you want an inner shadow.
- Click "Generate CSS" to see a preview and the generated CSS.
Example
Input
Offset X: 0 / Y: 4 / Blur: 8 / Spread: 0 / Color: #000000
Output
box-shadow: 0px 4px 8px 0px #000000;
Use Cases
- Fine-tuning a shadow style for a card or button while watching a live preview
- Converting a shadow specified in a design mockup into a box-shadow CSS value
- Creating an inset (inner) shadow for a pressed-in effect, adjusting values as you go
FAQ
Can I use formats like rgba() or hsl() for the color?
Yes. Only values starting with "#" are validated as HEX format; anything else (rgba(), hsl(), color keywords, etc.) is used as-is as a CSS value.
Can blur and spread be negative?
Spread radius can be negative, but blur radius must be 0 or greater per the CSS specification, so a negative value results in an error.
Can I layer multiple shadows?
This tool generates a single box-shadow declaration. To layer multiple shadows, combine the generated CSS values manually with commas.
Notes
- Blur radius must be 0 or greater per the CSS specification. A negative value results in an error. Spread radius can be negative.
- The color field is validated as HEX only when it starts with "#"; other values (such as rgba()) are used as-is as a CSS value.
- To layer multiple shadows, combine the generated CSS values manually with commas (this tool only generates a single box-shadow declaration).
Related Tools
Generate a CSS border-radius value by specifying the radius of each corner.
Generate linear-gradient or radial-gradient CSS from colors and positions.
Generate CSS Grid styles from column count, row count, and gap.