Design CSS box shadows with live preview. Adjust offset, blur, spread, color and opacity, add inset shadows and copy the CSS code. Free generator.
About this tool
Design a box shadow with offsets, blur, spread and opacity controls.
How to use CSS Box Shadow Generator
- Adjust Horizontal offset, Vertical offset, Blur and Spread.
- Choose Shadow, Box and Background colors; enable Inset shadow for an inner shadow.
- Inspect the preview and copy the generated CSS.
Worked example
Use a small vertical offset with a soft blur to separate a card from its background.
What is the difference between blur and spread?
Blur softens the edge. Spread expands or contracts the shadow region before that softening.
Does a shadow change layout size?
It is a visual effect rather than extra layout spacing. Ensure nearby content and overflow rules leave room for it.
Explore CSS Tools · More practical guides