Shadow CSS Builder
Adjust offsets, blur, spread, and opacity to create a card shadow.
How to use
- Set horizontal and vertical offsets. Negative values move left or up; positive values move right or down.
- Use blur to soften the edge and spread to expand or contract the shadow.
- Paste the declaration inside the card’s CSS rule and check it against the actual page background.
When to use this tool
Tune a card’s shadow by adjusting its direction, edge softness, and darkness separately. The result is a CSS box-shadow declaration for a web element rather than an edited image.
Inputs and settings
Result
Example input and actual output
- Horizontal offset (px): 0
- Vertical offset (px): 8
- Blur (px): 24
- Spread (px): 0
- Shadow color: #000000
- Opacity (%): 20
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
The example uses no horizontal offset, an 8px downward offset, 24px blur, and black at 20% opacity. Negative spread contracts the shadow. A large shadow may extend beyond and be clipped by the preview area.
Scope and limitations
Outputs one outer shadow as a box-shadow declaration.
Next step and alternatives
Button CSS Starter — Prepare colors, radius, and padding for a button on the same screen.
Frequently asked questions
How do blur and spread differ?
Blur changes edge softness; spread changes shadow extent. Adjust spread when you want a larger shadow without a softer edge.
Can I make inset or layered shadows?
This tool creates one outer shadow. Add inset or additional comma-separated shadows by editing the CSS.
Why can a large shadow look clipped in the preview?
A large shadow can extend beyond and be clipped by the preview area. Check the generated CSS in the actual background and layout too.
Related tools
Share this tool
Share only the tool name and public URL. Your input and results are not included.