CSS Box Shadow Generator
Tune a card or inset shadow while seeing the result. Start from a preset or set the offsets, blur, spread and opacity yourself, then copy the declaration into your component stylesheet.
Local processing · No account required · Copy and export
Workspace
Ready to useHow to use CSS Box Shadow Generator
- Choose a preset or enter horizontal and vertical offsets. Positive values move the shadow right and down.
- Set blur, spread, color and opacity. Enable inset for an inner shadow or the second layer for extra definition.
- Review the preview against the page background. Copy the generated declaration or download a small CSS file.
When to use this tool
Compare elevation styles for cards, dialogs and inset controls. Copy a preset as a starting point, then check contrast and visual weight in the component itself.
Understand offsets, blur and spread
Blur softens the shadow edge and cannot be negative. Spread grows the shadow shape when positive and shrinks it when negative. The inset keyword moves the shadow inside the element's border. Multiple comma-separated shadows draw separate layers; this tool's optional second layer uses a small fixed blur to complement the main layer.
Worked example
box-shadow: 0px 12px 30px -8px rgba(38, 59, 73, 0.2);
/* x: 0, y: 12, blur: 30, spread: -8 */Limits and output checks
A box shadow follows the element's box rather than the visible alpha outline of an image. Use filter: drop-shadow() when that distinction matters. The preview background, border radius and element size also influence perceived depth, so test in your component.
Reference: CSS box-shadow reference.
Frequently asked questions
What does a negative spread do?
It contracts the shadow shape before blur, which can help concentrate a shadow below a card.
Can I create an inset shadow?
Yes. Enable inset or start with the inset preset. The exported declaration includes the inset keyword.
Why does the shadow look different on my site?
Background color, element dimensions, clipping and surrounding layers change how a shadow is perceived. Compare it in the intended layout.
Choose a box shadow for the actual component
Set the available shadow values and review the preview’s shape and background. Copy the CSS into the destination component for its own design review.
Scope of this workflow
A box shadow follows the element box, not an image’s alpha outline. The sample cannot reproduce every component background or size.
CSS Clamp Calculator — Fluid Type & Spacing · All developer tools · Privacy policy · Contact PixelOkay