DEV Community

The AI producer
The AI producer

Posted on

12 CSS Box Shadow Techniques That Make Your UI Look Professional

#css #webdev #design #tools

Why Box Shadows Matter More Than You Think

Box shadows are one of those CSS properties most developers set once and forget. But the difference between a default box-shadow: 0 2px 4px rgba(0,0,0,0.1) and a carefully crafted multi-layered shadow can transform a flat UI into something that feels polished, tactile, and professional.

After building 67 free developer tools, I've learned that the tools developers bookmark most are the ones that solve visual design problems fast. So I built a CSS Box Shadow Generator that goes beyond the basics.

Here are 12 box shadow techniques that will level up your UI — with copy-paste code for each.

1. The Subtle Shadow (Elevation 1)

The workhorse for cards, inputs, and dropdowns.

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
Enter fullscreen mode Exit fullscreen mode

When to use: Default state for interactive elements. Barely visible, but creates just enough depth to separate elements from their background.

2. Soft Shadow (Elevation 2)

For elements that need slightly more prominence — like expanded cards or hovered items.

box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.1);
Enter fullscreen mode Exit fullscreen mode

When to use: Hover states, modals, popovers, and elevated containers.

3. Medium Shadow (Elevation 3)

Clear elevation for important UI elements.

box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
Enter fullscreen mode Exit fullscreen mode

When to use: Dialogs, important cards, sticky elements, and focused inputs.

4. Lifted Shadow (Multi-Layer)

Material Design popularized this: multiple shadow layers create a realistic light diffusion effect.

box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.15),
            0 8px 16px -4px rgba(0, 0, 0, 0.1);
Enter fullscreen mode Exit fullscreen mode

When to use: Dragging elements, active modals, and tooltips. The two layers simulate light wrapping around the object.

5. Hard Shadow (Flat Design)

No blur — a sharp offset that screams brutalism and flat design.

box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
Enter fullscreen mode Exit fullscreen mode

When to use: Buttons in retro/modern UIs, accent elements, portfolio sites. Also try doubling it for a stacked effect.

6. Neumorphic Shadow

The trendy soft UI effect using paired light and dark shadows.

box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2),
           -8px -8px 16px rgba(255, 255, 255, 0.05);
Enter fullscreen mode Exit fullscreen mode

When to use: Dashboard widgets, toggles, and control panels on neutral backgrounds. The key is matching your shadow colors to your background.

7. Inset Shadow

Shadows that go into the element rather than outside.

box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.25);
Enter fullscreen mode Exit fullscreen mode

When to use: Text inputs (the pressed-in feel), recessed containers, active button states, and image overlays.

8. Glow Effect

Colored shadows that create a neon/light-emitting effect.

box-shadow: 0 0 30px 5px rgba(99, 102, 241, 0.5);
Enter fullscreen mode Exit fullscreen mode

When to use: Primary CTA buttons, feature highlights, dark mode accents. Pair with a subtle backdrop-blur for maximum effect.

9. Layered Progressive Shadow

Five layers with increasing blur — creates a realistic ambient occlusion.

box-shadow: 0 1px 2px rgba(0,0,0,0.05),
            0 2px 4px rgba(0,0,0,0.05),
            0 4px 8px rgba(0,0,0,0.05),
            0 8px 16px rgba(0,0,0,0.05),
            0 16px 32px rgba(0,0,0,0.05);
Enter fullscreen mode Exit fullscreen mode

When to use: Hero sections, floating elements, and anything that needs a premium, realistic shadow.

10. Brutalist Shadow

Bold, offset, no mercy.

box-shadow: 8px 8px 0 rgba(0, 0, 0, 1);
Enter fullscreen mode Exit fullscreen mode

When to use: Headlines, editorial layouts, and designs that embrace raw typography. Works best with thick borders and bold typefaces.

11. Dreamy Multi-Color

Colored shadows from different virtual light sources.

box-shadow: 0 20px 60px -10px rgba(99, 102, 241, 0.15),
            0 10px 30px -5px rgba(168, 85, 247, 0.1);
Enter fullscreen mode Exit fullscreen mode

When to use: Landing page heroes, product showcases, and creative portfolios. The dual colors create depth and visual interest.

12. Sharp Stacked

Two hard shadows with increasing offset — a retro 3D look.

box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2),
            12px 12px 0 rgba(0, 0, 0, 0.1);
Enter fullscreen mode Exit fullscreen mode

When to use: Retro gaming UIs, playful buttons, and creative portfolios. The stacked effect is eye-catching without being overwhelming.

Tips for Better Shadows

  1. Use negative spread — it keeps shadows tight around elements instead of expanding past their borders.
  2. Lower opacity, larger blur — subtle is almost always better than dramatic.
  3. Match your theme — in dark mode, use lighter shadow colors or reduce opacity significantly.
  4. Animate transitions — adding transition: box-shadow 0.2s to hover states makes elevation changes feel physical.
  5. Consistency is key — define 3-4 shadow levels (elevation 1-4) and use them consistently across your design system.

Try It Yourself

I built a free CSS Box Shadow Generator with all 12 of these presets built in. You can adjust every parameter with live preview, stack multiple shadow layers, toggle inset mode, and export as raw CSS or Tailwind classes — no signup, runs entirely in your browser.

All 67 of our free developer tools work the same way: client-side, private, no signup.

Originally published on Free Tools Hub

Top comments (0)