CSS Box Shadow Guide: How to Create Better Shadows

Shadows are one of the most powerful tools in UI design. Used well, they create depth, establish visual hierarchy and make interfaces feel tangible. Used poorly, they make designs look dated, heavy or amateurish.

This guide covers the CSS box-shadow syntax, the difference between soft and strong shadows, practical UI examples, accessibility considerations and how to use the Box Shadow Generator to design shadows visually.

What is box-shadow in CSS?

The box-shadow property adds one or more shadow effects around an element's frame. It does not affect layout — it is purely visual.

Box-shadow syntax explained

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

• inset (optional) — Makes the shadow appear inside the element.
• offset-x — Horizontal offset. Positive moves right, negative moves left.
• offset-y — Vertical offset. Positive moves down, negative moves up.
• blur-radius — How blurry the shadow is. 0 = sharp edge. Higher = softer.
• spread-radius — Expands or contracts the shadow. Negative values shrink it.
• color — The shadow color. Use rgba() for transparency control.

Common examples

/* Soft card shadow */
box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.12);

/* Medium elevation */
box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.18);

/* Sharp drop shadow */
box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.25);

/* Inner shadow (pressed state) */
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);

/* Multiple shadows */
box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);

The best shadows are the ones you barely notice. Subtlety is the mark of a polished UI.

Soft shadows vs strong shadows

Soft shadows (modern, minimal)

Soft shadows use a large blur radius, negative spread and low opacity. They create a sense of gentle elevation without drawing attention to themselves. This is the dominant style in modern UI design.

box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.10);

Strong shadows (dramatic, retro)

Strong shadows use a small blur radius, high opacity and sometimes a colored shadow. They create a bold, graphic effect. Common in retro-inspired designs and neo-brutalism.

box-shadow: 4px 4px 0 0 #000000;

UI examples: where to use shadows

• Cards — A soft shadow lifts the card off the background, making it feel interactive.
• Buttons — A subtle shadow on a primary button adds depth and makes it feel pressable.
• Modals and dropdowns — A larger shadow creates the illusion of the element floating above the page.
• Input fields — An inset shadow on a focused input creates a subtle pressed effect.
• Navigation bars — A thin bottom shadow separates the nav from the page content.

Accessibility and readability tips

• Do not rely on shadows alone for contrast — Users with visual impairments or high-contrast mode may not see shadows. Use borders or background color differences as well.
• Avoid colored shadows on text — Colored shadows on text can reduce readability. Use them only on decorative elements.
• Test in dark mode — Shadows that look great on white backgrounds can disappear or look wrong on dark backgrounds. Use lighter shadow colors in dark mode.

How to use the Box Shadow Generator

1. Open the Box Shadow Generator.
2. Start with a preset (Soft, Medium, Large, Sharp or Inner) to get a good starting point.
3. Adjust the sliders: horizontal offset, vertical offset, blur radius, spread radius and opacity.
4. Change the shadow color and background color to match your design.
5. Enable Inset to create an inner shadow effect.
6. Copy the generated CSS and paste it into your stylesheet.

Frequently Asked Questions

What is the CSS box-shadow property?

box-shadow adds one or more shadow effects around an element's frame. It accepts horizontal offset, vertical offset, blur radius, spread radius, color and an optional inset keyword.

Can I add multiple shadows to one element?

Yes. Separate multiple shadow values with commas. Layering two shadows (one tight, one diffuse) creates a more realistic depth effect.

What is an inset shadow?

An inset shadow appears inside the element rather than outside. It is useful for pressed button effects, inner glow effects and depth on input fields.

Does box-shadow affect layout?

No. box-shadow does not affect the layout or size of the element. It is purely visual.

Is the Box Shadow Generator free?

Yes. The Sounez Box Shadow Generator is completely free. No account needed.

Conclusion: subtle depth, big impact

The best shadows are the ones users feel rather than see. They create depth and hierarchy without drawing attention to themselves. Open the Box Shadow Generator, start with the Soft preset, and adjust until it feels right. For the full design toolkit, pair it with the CSS Gradient Generator and the Color Palette Generator.