Move the sliders to set the horizontal and vertical offset, blur, spread, colour and opacity of a shadow, and the preview box updates as you go. Tick Inset for an inner shadow, add up to five layers for realistic depth, and change the box and background colours to match your design.
Start from a preset such as Soft, Card, Hard, Floating or Inner, then fine-tune it. The CSS uses rgba() colours so the shadow blends with any background, and is ready to paste into your stylesheet.
How to use the Box Shadow Generator tool
- Pick a preset or start with the default shadow.
- Adjust offset, blur, spread, opacity and colour.
- Add more layers for depth, or tick Inset for an inner shadow.
- Copy the
box-shadowCSS.
Why use ToolOrca Box Shadow Generator
- Offset, blur, spread, colour and opacity
- Inset (inner) shadows
- Up to five layered shadows
- Presets for common styles
- Custom box and background colours
- Copy-ready CSS
box-shadow syntax explained
box-shadow: inset? x y blur spread color; – x and y move the shadow right and down (negative values move it left and up), blur softens the edge, and spread grows or shrinks the shadow before blurring. Separate several shadows with commas; the first one is drawn on top.
Natural-looking shadows usually combine a small, darker shadow close to the element with a larger, softer one further away, and use a low opacity rather than solid black.
Frequently asked questions
How do I add a shadow to only one side?
Use an offset on that side and a negative spread that cancels the others, for example 0 8px 6px -6px rgba(0,0,0,.4) for a shadow only at the bottom.
What is the difference between box-shadow and drop-shadow?
box-shadow follows the element's box (including border-radius). filter: drop-shadow() follows the shape of transparent images and does not support spread or inset.
Do box shadows slow down a page?
Static shadows are cheap. Very large blurred shadows that animate can cost performance on slow phones; animate opacity of a pseudo-element instead.
How do I make a neumorphism shadow?
Use two layers on a background that matches the box: a light shadow offset up-left and a dark one offset down-right, for example -8px -8px 16px #fff, 8px 8px 16px #c8ccd6.