Web Tools
CSS Box Shadow Generator
Build layered CSS box shadows with a live preview.
CSS
box-shadow: 0px 10px 30px -8px #00000040;About This Tool
CSS box-shadow adds depth, separation, focus, or an inset treatment to an element without an image asset. This generator exposes each part of the property separately, lets you combine multiple shadow layers, previews the result on a simple surface, and produces a declaration you can copy into a stylesheet.
How To Use It
- Set horizontal and vertical offsets for each shadow layer.
- Choose a non-negative blur radius and a spread value; negative spread is valid and tightens the shadow footprint.
- Enter a CSS color and optionally switch the layer to inset.
- Add layers when one shadow cannot provide the desired edge and depth, then copy the generated box-shadow declaration.
Examples
Soft card elevation
Use a small positive Y offset, a larger blur radius, a slightly negative spread, and a translucent dark color for restrained separation.
Inset control
Enable inset with a small offset and blur to place the shadow inside the element's border box.
Layered depth
Combine a tight low-blur layer with a wider softer layer to control both the contact edge and ambient shadow.
Useful Notes
Box-shadow value order
Each layer follows horizontal offset, vertical offset, blur radius, spread radius, and color, with the optional inset keyword. Horizontal and vertical offsets may be negative. Blur cannot be negative, while spread can be positive or negative.
Blur and spread are different
Blur softens the shadow edge. Spread expands or contracts the shadow's starting footprint before blur is applied. Increasing blur is therefore not equivalent to increasing spread.
Multiple shadow layers
CSS accepts comma-separated box shadows. Layering lets a design use a tight contact shadow and a broader ambient shadow without baking the effect into an image.
Inset shadows
The inset keyword moves the effect inside the element. It is useful for recessed surfaces and inner edges, but strong inset shadows can reduce clarity around controls and content.
Color and transparency
Translucent shadow colors usually adapt more naturally to varied surfaces than fully opaque shadows. The color field accepts CSS color syntax supported by the browser, so the final appearance depends on browser parsing and the surrounding background.
Performance and readability
Simple shadows are inexpensive to author, but very large blurred areas or many animated shadow layers can increase painting work. Shadows should support hierarchy rather than being the only cue that distinguishes interactive elements.
FAQ
Can box-shadow use negative values?
X and Y offsets and spread may be negative. The blur radius cannot be negative.
Can I combine several shadows?
Yes. CSS separates shadow layers with commas; this tool generates that list for you.
What does inset do?
Inset draws the shadow inside the element instead of outside it.
Does a shadow replace accessible boundaries?
Not necessarily. A subtle shadow may disappear on some displays or backgrounds, so important controls should still have adequate contrast and other clear visual states.
Related Tools
CSS Gradient Generator
Create copyable linear and radial CSS gradients with a live preview.
Color Converter
Convert and preview HEX, RGB, and HSL colors.
Color Contrast Checker
Check WCAG text contrast ratios for two web colors.
CSS Unit Converter
Convert relative CSS units with the context that determines their real size.