Box-shadow in CSS — How to add shadows without overdoing it

The box-shadow property in CSS adds visual depth to elements. It is widely used in cards, buttons, and input fields.

If you are searching for box shadow in CSS or best shadow values for cards or the difference between inset and outer shadow, this lesson explains it clearly.

What Is box-shadow in CSS?

box-shadow adds a shadow outside or inside an element. A good shadow improves visual hierarchy and makes a design feel more professional.

Simple definition: box-shadow in CSS adds depth with a soft or strong shadow depending on the need.

box-shadow Syntax in CSS

Understanding the value order

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: moves the shadow horizontally.
• offset-y: moves the shadow vertically.
• blur-radius: controls softness.
• spread-radius: expands or shrinks the shadow (optional).
• color: shadow color, usually with rgba().

How to Use box-shadow in CSS

.card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

What does this code do? Adds a soft shadow below the card.

Expected result: a clearer, deeper card without visual clutter.

Common mistake: using a shadow that is too dark, making the UI feel heavy.

Button Shadows in CSS

.btn-main {
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.35);
}

What does this code do? Highlights a primary CTA button with a soft colored shadow.

Expected result: the button becomes more noticeable.

Common mistake: overdoing the shadow so the UI looks dated.

Inset Shadow (Inner Shadow)

When you add inset, the shadow appears inside the element rather than outside.

.inset-box {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22);
}

What does this code do? Creates the feeling that the element is pressed inward.

Expected result: great for input fields or inner panels.

Common mistake: using inset everywhere and losing visual hierarchy.

When to Use a Subtle Shadow vs a Strong Shadow

• Use a light shadow for regular elements like secondary cards.
• Use a more noticeable shadow for important elements like CTAs.
• Keep a consistent shadow system in your project (2-3 levels only).

Common Mistakes in Box Shadow CSS

1) Shadow too dark: causes visual noise.

2) Huge blur without need: makes elements overly fuzzy.

3) No consistent system: every element gets a random shadow.

FAQ - Common Search Questions

What is the box-shadow property in CSS?

A property that adds a shadow around or inside an element to improve visual depth.

How do I make a soft shadow for cards in CSS?

Use a balanced blur value and a transparent color like rgba(0,0,0,.12).

What is the difference between outer shadow and inset?

Outer shadow appears outside the element, while inset appears inside.

Can I apply more than one box-shadow to the same element?

Yes, you can separate multiple shadows with commas for a layered effect.

What is a good box-shadow setting for buttons?

Moderate values like 0 4px 12px rgba(13,110,253,.35) usually work well.