Box-Shadow Generator
Build soft, realistic CSS shadows from layers and copy the code.
How to use the Box-Shadow Generator
- Start from a preset such as Soft or Lifted, or shape the first layer yourself.
- Adjust offset, blur, spread, colour and opacity; add more layers for depth.
- Change the background, box colour and corner radius to match your design.
- Copy the CSS rule.
About this tool
Shadows are how flat screens suggest depth: a card that floats above the page, a button that sits slightly raised, a panel pressed in. A single dark, blurry shadow often looks heavy and artificial. Real objects cast shadows that are sharp and dark close to the object and soft and faint further away, and stacking two or three shadow layers recreates that effect convincingly.
This generator lets you build those layers visually. Each one has a horizontal and vertical offset, a blur radius, a spread that grows or shrinks the shadow, a colour and an opacity, and can sit inside the box instead of outside. Turn layers on and off to compare, and preview them on your own background and box colours.
Tinting shadows slightly towards your brand or background colour, instead of pure black, makes them blend naturally. The output uses the modern rgb() notation with an alpha value, which every current browser understands.
Frequently asked questions
Why use more than one shadow layer?
A tight, darker layer suggests contact with the surface and a wide, faint layer suggests height. Together they look far more natural than one large blurry shadow.
What does spread do?
Spread grows (positive) or shrinks (negative) the shadow before it is blurred. Negative spread with a large blur gives a soft shadow that stays tucked under the box.
What is an inset shadow?
A shadow drawn inside the box instead of outside, which makes it look pressed in. It is often used for input fields and pressed buttons.
Do box shadows slow down a page?
Not noticeably in normal use. Very large blurs on many elements that animate can cost performance on slow devices, so keep animated shadows modest.
Is my design saved?
Your layers are remembered in this browser so you can come back to them. Nothing is uploaded.