CSS Box Shadow and Filter Effects

Flat design has its place, but a touch of depth — a soft shadow under a card, a subtle blur behind a modal — is often what makes an interface feel polished instead of static. CSS gives you two tools for this: box-shadow for drawing shadows around an element's box, and filter for applying graphical effects (blur, brightness, grayscale, and more) directly to the rendered pixels of an element.

Both are plain CSS properties — no images, no extra markup — and both animate smoothly with CSS transitions, which is what makes them so useful for hover effects.

The box-shadow Property

box-shadow takes up to five values: horizontal offset, vertical offset, blur radius, spread radius, and a color. You can also stack multiple shadows on one element by separating them with commas, and add the inset keyword to draw the shadow inside the box instead of outside it.

.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card--pressed {
  /* inset flips the shadow to the inside, giving a "pressed in" look */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

The first rule gives a card a soft shadow floating 4px below it with a 12px blur — a common "elevated card" look. The second draws a shadow inward, which reads visually as a sunken or pressed surface instead of a raised one.

A Practical Card Hover Shadow

<div class="card">
  <h3>Product Name</h3>
  <p>A short description goes here.</p>
</div>

.card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

At rest the card has a barely-there shadow. On hover, the shadow grows larger and softer while the card lifts slightly upward — the combination reads as the card physically rising off the page toward the cursor.

The filter Property

While box-shadow only draws around an element, filter changes the element's own pixels. Common filter functions include blur(), brightness(), contrast(), grayscale(), and drop-shadow() (a shadow that follows an element's actual shape, including transparency — useful for icons and logos where box-shadow's rectangular shadow looks wrong).

.thumbnail {
  filter: grayscale(100%);
  transition: filter 0.2s ease;
}

.thumbnail:hover {
  filter: grayscale(0%);
}

This is a popular gallery pattern: thumbnails sit in grayscale until hovered, at which point they smoothly transition to full color — drawing the eye naturally toward whichever image the visitor is focused on.

Both properties are inexpensive for the browser to animate and need no JavaScript at all, which is why they show up constantly in real interfaces once you start combining them with the transition property covered elsewhere in this course.

---