Processing and privacy
Processing varies by tool. Check the instructions for local processing, server requests, external services and any file or request limits before entering sensitive information.
Read the privacy policyShare this tool
Found it useful? Send it to a friend or teammate.
Rate this tool
5.0
1 rating
- 5 stars 1
- 4 stars 0
- 3 stars 0
- 2 stars 0
- 1 star 0
Clear instructions
Find steps, examples and limitations below.
Use online
Open the tool in a supported web browser.
Free to use
No sign-up required. Tool-specific limits may apply.
How to use the CSS Box Shadow Generator
Design a box shadow with offsets, blur, spread and opacity controls.
- 1 Adjust Horizontal offset, Vertical offset, Blur and Spread.
- 2 Choose Shadow, Box and Background colors; enable Inset shadow for an inner shadow.
- 3 Inspect the preview and copy the generated CSS.
Example and practical tips
Use a small vertical offset with a soft blur to separate a card from its background.
Frequently asked questions
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.
Practical guides
-
How to Use CSS Box Shadow Generator
Design CSS box shadows with live preview. Adjust offset, blur, spread, color and opacity, add inset shadows and copy the CSS code. Free generator.
Report an issue
Something broken or not quite right? Tell us and we will look into it.