CSS Box Shadow Generator | Shadow Preview
Design CSS box shadows with horizontal offset, vertical offset, blur, spread, inset mode, and color preview.
Shadow Settings
CSS Code
Design CSS Box Shadows
Adjust X and Y offset, blur radius, spread, inset mode, and shadow color to preview a box-shadow style and copy the CSS for buttons, cards, panels, modals, and UI components.
Keep Shadows Subtle and Readable
Large blur or spread values can look heavy, reduce contrast, and hurt mobile performance when repeated across many elements. Test shadows against the real page background.
Where Box Shadows Fit
Use box shadows to separate cards, dropdowns, dialogs, sticky headers, and callouts. Avoid relying on shadow alone to show important state changes or accessibility cues.
About This Tool
Box Shadow Generator creates CSS box-shadow declarations using visual controls for offset, blur, spread, colour, and inset. It outputs ready-to-paste CSS and provides a live preview so you can adjust the shadow without editing stylesheets manually.
When to Use It
Use this when designing cards, buttons, or panels that need depth and elevation, when matching a shadow style from a design mockup, or when layering multiple shadows for a polished UI.
How to Use
- Adjust the horizontal and vertical offset sliders.
- Set the blur and spread radius.
- Choose the shadow colour and opacity.
- Toggle inset for an inner shadow effect.
- Copy the generated CSS property.
Frequently Asked Questions
Can I add multiple shadows to one element?
Yes. CSS box-shadow accepts a comma-separated list of shadow values. Layer them in the output code for complex effects.
What is the difference between blur and spread?
Blur controls how soft the shadow edges are. Spread expands or shrinks the shadow size before blur is applied.
What does the inset keyword do?
Inset draws the shadow inside the element boundary, creating a recessed or pressed appearance instead of a raised one.