Create smooth box shadows instantly.

Shadows: light in a world without light

A screen is flat. A shadow suggests that something floats.

That is useful. A card lifts off the page. A button asks to be pressed. A modal comes forward.
A shadow tells the eye what is on top.

✦ Think in light first

In the real world, light comes from somewhere. Usually from above.
That is why most shadows fall down, and a little to the side.

Choose one light source for your whole design. If every element has shadows in different directions, the page feels restless without anyone knowing why.

✦ The four values

• Offset X and Y. How far the shadow moves. Small values feel close to the surface.
• Blur. How soft the edge is. More blur feels higher and lighter.
• Spread. How large the shadow is before it blurs. Often zero or negative.
• Color and opacity. Rarely pure black. A dark, transparent tint of your background looks natural.

✦ How to use this generator

1. Start with a preset, like Soft Card, or with a small offset and a soft blur.
2. Lower the opacity until the shadow almost disappears. Then go back one step.
3. Adjust the corner radius so the shadow follows the shape of your element.
4. Copy the CSS. For extra depth, combine it in your stylesheet with a second, larger and softer shadow. Layered shadows look more real.
5. Check it on a light and a dark background.

✦ Elevation

Give your interface a few levels. Flat. Raised. Floating.
A card at rest has a small shadow. The same card on hover rises a little. A dialog floats highest.

Three or four levels are enough. Write them down once. Use them everywhere.

✦ Common mistakes

• Shadows that are too dark. They look like dirt.
• Shadows on everything. Then nothing stands out.
• Hard shadows with a large offset. That is a style, not a default.
• Forgetting dark mode. Shadows barely show on dark backgrounds. Use lighter surfaces instead.

✦ Try this

Remove every shadow from your design. What do you miss?
Only put back the shadows you missed. Usually that is less than half.

✦ In practice

A product card in a web shop. At rest: a very soft shadow, a few pixels down, low opacity. On hover: slightly larger and softer.
The card seems to rise toward your finger. It invites a click without saying so.

A dropdown menu. It sits above the page, so it needs a clearer shadow than a card. A second, wider shadow with very low opacity adds depth.
Now it clearly floats. Nobody tries to click through it.

A flat, minimal design. Sometimes the best shadow is none. Use a thin border or a slightly different background color instead.
Separation does not always need depth.

✦ Four questions before you add a shadow

1. What do you want to say? That this element is on top, or can be touched.
2. What must be seen first? The element with the strongest shadow. Make sure that is the right one.
3. What can go? Shadows on elements that do not move or respond.
4. What is the next small step? Define three elevation levels and use only those.

✦ A small checklist

• One light source for the whole design.
• Shadow color is a transparent dark tint, not solid black.
• A fixed set of elevation levels.
• Hover states rise a little, they do not jump.
• Checked on both light and dark backgrounds.

✦ From the classroom

We let students photograph a paper card on a table, near a window.
Look at the shadow. Soft, light, a little blue. Then rebuild it in CSS.
The best interface shadows are copied from paper.