Box Shadow Generator
Design a CSS box-shadow visually.
box-shadow: 0px 10px 25px -5px rgba(15, 23, 42, 0.25);About this tool
Drag offset, blur, spread, and colour and watch the shadow update, then copy the CSS. Shadows are hard to write blind because the four numbers interact — more blur without more offset just makes a grey halo.
The shadows that read as expensive are almost always layered: two or three stacked shadows, each with a different blur and a low opacity, rather than one heavy black one.
Common questions
Why do my shadows look cheap?
Usually pure black at high opacity. Real shadows are tinted by the surface under them and are much softer than people expect. Try a very low-opacity shadow of a dark blue-grey rather than black, and stack two at different blurs.
What is the difference between blur and spread?
Blur softens the shadow edge outward from its shape. Spread grows or shrinks the shape itself before blurring. Negative spread with a large blur gives the tight, tucked-under look used for cards.
How do I make an inner shadow?
Add the `inset` keyword and the shadow renders inside the element instead of outside — the usual way to make an input or a well look recessed.
Turn it into an interactive demo
createademo turns screenshots and recordings into demos your buyers click through themselves. Free plan, full editor, no credit card.