CSS Box Shadow Generator
Tune a box shadow with sliders and a live preview, then copy the CSS. The layered option adds a subtle contact shadow for a more natural, modern look.
No data needed
How to use
- Adjust offset, blur, spread and opacity.
- Pick the shadow colour.
- Toggle inset or layered shadows.
- Copy the CSS.
How it works
box-shadow takes a horizontal and vertical offset, a blur radius, a spread radius and a colour. Negative spread shrinks the shadow, which avoids a heavy “halo”. Layering a tight, low-opacity shadow under a larger soft one imitates how real light creates both a contact shadow and ambient shadow.
Examples
- Card
- 0px 12px 32px -8px rgba(15, 23, 42, 0.25)
Common uses
- Cards, modals and dropdowns
- Buttons and hover states
- Design systems
Privacy & security
This tool does not take any personal data or files. Results are generated on your device. How each tool handles files
Frequently asked questions
Does box-shadow affect performance?
Large blurred shadows can be costly when animated. Animate opacity of a pseudo-element instead of the shadow itself.
Can I apply it to text?
Use text-shadow for text; it has no spread value.
Last updated: