Design a CSS box-shadow with live sliders and copy the code.
Generated locally in your browser.
How do you generate a CSS box-shadow?
The output uses box-shadow: [inset] offset-x offset-y blur spread color, with the colour converted to rgba() so opacity applies. Offset moves the shadow, blur softens its edge, spread grows or shrinks it, and inset draws the shadow inside the element. For example, a 0px 12px 24px shadow in dark slate at 25% opacity gives a soft, modern card elevation. Adjust sliders and copy the code.
Understanding your result
Offset moves the shadow, blur softens its edge, spread grows or shrinks it, and inset draws the shadow inside the element instead of behind it.
Formula and method
The output uses box-shadow: [inset] offset-x offset-y blur spread color, with the colour converted to rgba() so the opacity applies.
Assumptions and limitations
This generator builds a single box-shadow layer at a time; stacking multiple shadows is done by combining outputs yourself. It applies to rectangular boxes and follows border-radius, but does not create drop-shadows that trace irregular shapes or transparent PNGs, which need the filter property instead.
Worked example
A 0px 12px 24px shadow in dark slate at 25% opacity gives a soft, modern card elevation.
How to use this tool
- Choose an outer or inset shadow.
- Set the horizontal and vertical offset, blur and spread.
- Pick the colour and opacity, then copy the generated CSS.
Common mistakes to avoid
- Using full opacity, which makes shadows look harsh rather than natural.
- Adding a large spread with no blur, which creates a hard outline.
About the CSS Box Shadow Generator
Build a CSS box-shadow visually and copy the ready-to-use code. Drag the sliders for offset, blur, spread and opacity and watch the live preview update instantly.
Who should use this tool
Front-end developers and designers who want a polished shadow without hand-tuning values in code.
Benefits
- See every offset, blur and spread change reflected instantly
- Copy production-ready CSS with no manual rgba() maths
- Dial in opacity precisely for subtle, modern elevation
- Toggle inset shadows to draw inside the element
Practical use cases
- Add soft elevation to cards, buttons and modals
- Prototype hover and focus states for interface components
- Create inset shadows for pressed or recessed controls
- Match a shadow to an existing design mockup
Explore all Developer Tools tools
Frequently asked questions
Can I stack multiple shadows?
Yes — separate each shadow with a comma in the box-shadow property. This tool builds one shadow at a time that you can combine.
What is an inset shadow?
An inset shadow is drawn inside the element, which is useful for pressed buttons or inner depth.
Why is my colour output written as rgba()?
The generator converts your chosen colour to rgba() so the opacity slider can control transparency in a single value. This keeps the shadow soft and layer-friendly, and rgba() is supported everywhere box-shadow is, so you can paste the code straight into any stylesheet without changes.