CSS Shadows

Shadow Effects

Shadows are used to create depth and separation in UI. In CSS, the most common shadow effect is created with box-shadow. Shadows can be:

• Soft (subtle depth for cards and panels)
• Hard (sharp shadows for strong contrast)
• Inset (inner shadows for pressed effects)
• Multiple (layered shadows for realistic depth)

Shadows work best when used consistently across a design system. For example, buttons, cards, dropdowns, and modals often share the same shadow style.

.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

Tip: If you want only the background to look “lighter/darker”, avoid using opacity on the whole element. Instead, adjust shadow alpha (rgba()).

Box Shadow

The box-shadow property adds shadow to an element. Basic syntax:

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

Where:

• offset-x – horizontal movement (positive = right, negative = left)
• offset-y – vertical movement (positive = down, negative = up)
• blur – softness (bigger = softer)
• spread – size expansion (optional)
• color – usually rgba() for transparency

Simple shadow:

.box {
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

Hard shadow (no blur):

.box {
  box-shadow: 6px 6px 0 rgba(0,0,0,.25);
}

Inset (inner) shadow:

.input {
  box-shadow: inset 0 2px 6px rgba(0,0,0,.18);
}

Multiple shadows: Separate each shadow with a comma.

.box {
  box-shadow:
    0 1px 2px rgba(0,0,0,.12),
    0 12px 30px rgba(0,0,0,.10);
}

Common mistake: A shadow will follow the element’s border radius automatically, but if you see ugly corners, ensure your border-radius is applied to the same element that has the shadow.

Summary

• Shadows add depth and improve visual hierarchy in UI.
• box-shadow supports offsets, blur, spread, color, and inset.
• You can create multiple layered shadows for a more realistic effect.