CSS Box Shadow Tips: Pro Settings & Mistakes to Avoid

The single biggest upgrade to any CSS box-shadow is to stop using pure black at high opacity — real shadows are low-opacity, slightly tinted, and almost always layered. Get those three habits right and your shadows read as depth instead of dirt. This guide collects the settings and pitfalls that separate a flat, amateur shadow from a convincing one.

Everything below is easy to test live in the generator: change one value, watch the preview, and keep the version that looks like light rather than smudge.

Best practices that actually matter

• Keep opacity low. Most convincing shadows sit between 8% and 20% alpha. A shadow at full black looks like a hole cut in the page.
• Push the shadow down, not sideways. Light usually comes from above, so a positive Y offset with little or no X offset feels natural. Big horizontal offsets look like a mistake unless you are faking a specific light source.
• Tint the shadow. A shadow that borrows a little of the background or brand hue (a deep navy instead of #000 on a blue page) blends far better than neutral black.
• Match blur to elevation. A small element barely lifted off the page needs a tight shadow; a modal floating above everything needs a wide, soft one. Bigger elevation means bigger Y offset and bigger blur together.

The layering rule of thumb

Real depth comes from stacking, not from one heavy shadow. The reliable recipe is two layers: a tight, slightly darker contact shadow close to the element, plus a wide, fainter ambient shadow spread further out. Add both layers in the generator and it combines them into one comma-separated declaration.

Layer	Purpose	Rough settings
Contact	Anchors the element to the surface	Small Y, small blur, ~18–22% alpha
Ambient	Soft diffuse depth	Larger Y, large blur, ~10–14% alpha
Optional key	Extra realism for big elevations	Medium Y, medium blur, low alpha

Common mistakes and how to fix them

Confusing blur with spread. Blur softens the edge; spread changes the shadow's actual size before it blurs. If your shadow looks like a hard grey rectangle you have too much spread and too little blur. The popular "tight and soft" look is the opposite: a slightly negative spread with a generous blur, which pulls the shadow in so it peeks out softly from under the element.

Animating the shadow itself. Transitioning box-shadow on hover forces the browser to repaint the blur every frame, which stutters on cheaper devices. Instead, put the fully-formed shadow on a pseudo-element and animate its opacity — the shadow is pre-rendered, so only alpha changes.

Forgetting inset for recessed UI. Pressed buttons, input wells and toggle tracks should look carved into the surface. That is what the inset keyword is for — it draws the shadow inside the border. A common bug is applying a normal outer shadow to an input and wondering why it looks like it is floating rather than sunken.

Troubleshooting a shadow that looks wrong

If depth reads as "dirty," lower the opacity first. If it reads as "flat," you probably have a single layer — add an ambient layer. If the element looks like it is levitating, your Y offset is too large relative to the blur; bring the offset down and let blur do the work. And if the shadow is clipped at the container edge, check for an overflow: hidden ancestor.

Try the CSS Box Shadow Generator — free and 100% in your browser.

FAQ

What opacity should a subtle card shadow use?

Start around 10–15% alpha for the ambient layer and 18–22% for a small contact layer. Anything above roughly 30% starts to look muddy on a light background. Tune to your background: darker pages tolerate slightly higher opacity because the contrast is lower.

Why does my box shadow look grey and blocky?

Too much spread and not enough blur. Spread enlarges the solid shadow shape; without blur its edges stay hard. Reduce spread toward zero (or negative) and increase blur until the edge fades smoothly.

How many shadow layers is too many?

Two or three layers cover almost every real design. More than that rarely improves the look and increases paint cost. Reserve heavy stacking for a single hero element, not for every card in a long list.

Should I use box-shadow or drop-shadow for depth?

Use box-shadow for rectangular and rounded-rectangle elements — it is cheaper and predictable. Reach for filter: drop-shadow() only when you need the shadow to follow a transparent PNG or a clip-path shape rather than the element's box.

Related free tools

• CSS Border Radius Generator — round the cards your shadows sit on.
• CSS Gradient Generator — pair depth with a soft background.
• CSS Clip Path Generator — for shaped elements that need drop-shadow.
• CSS Formatter — clean up multi-layer shadow declarations.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio building web apps, SaaS and custom software. When a project needs more than polished shadows — a design system, a product build, or engineering help — explore how ByteVancer can support your team.