CSS Box Shadows

Depth is one of the easiest ways to make a flat web page feel tactile, and CSS gives it to you for free with the box-shadowproperty. It renders one or more shadows around an element’s frame, simulating the way light falls and casts a shadow behind a physical object, and it does all of this without a single image. With it you can lift a card off the page, make a button feel pressable, or build soft layered glows, and because it is pure CSS it stays sharp at any size and costs nothing to download. This article walks through how it works, from the basic syntax to layered effects and interactive hover states.

What a box shadow actually is

A box shadow is a visual effect that fakes the shadow an element would cast if it sat above the surface behind it. By offsetting and blurring a copy of the element’s shape, it tricks the eye into reading depth, and that small cue is what separates a flat interface from one that feels like it has layers. The property is flexible enough for subtle realism on a card and dramatic enough for a heavy stylised glow, and crucially you can stack several shadows on one element to build richer effects than any single shadow allows.

The syntax

The shape of the property is a short, ordered list of values.

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

The first two values are the only required ones. The horizontal offset moves the shadow right with a positive value and left with a negative one, while the vertical offset moves it down with a positive value and up with a negative one. After those come the optional refinements. The blur radius controls how soft the shadow is, with higher values spreading it into a more diffuse haze and zero producing a hard edge. The spread radius grows or shrinks the shadow’s overall size before the blur is applied. The color sets the tint, defaulting to a semi-transparent black if you leave it out. And the optional insetkeyword flips the whole thing from an outer shadow, the default, to an inner one.

A simple outer shadow

The most common use is a soft shadow that lifts an element slightly off the page.

.panel {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

This offsets the shadow ten pixels to the right and ten pixels down, blurs it over fifteen pixels, and tints it a semi-transparent black. The low opacity is what keeps it looking like a real shadow rather than a hard grey block, and using rgbais the standard way to get that translucency.

Pushing the shadow inward

Add the inset keyword and the shadow moves inside the element instead of behind it, which reads as the element being recessed or pressed in.

.panel {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2);
}

This is the effect you reach for on a pressed button state, an input field, or anything that should look carved into the surface rather than floating above it.

Layering multiple shadows

You can apply several shadows to one element by separating them with commas, and they stack in the order you list them, the first one on top.

.panel {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2),
              -5px -5px 10px rgba(0, 0, 0, 0.1);
}

Here one shadow falls to the bottom right and a lighter one to the top left, producing a softer, more dimensional look than either could alone. Layering is also the secret behind the most natural-looking elevation, since real objects rarely cast a single flat shadow.

Controlling the spread

The fourth value, the spread radius, grows or shrinks the shadow before it is blurred, which lets you make a shadow larger or tighter without changing its blur.

.panel {
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.2);
}

This shadow blurs over ten pixels as before, but the extra five-pixel spread pushes it out further all around, giving a fuller, heavier shadow. A negative spread does the opposite, pulling the shadow in tighter than the element, which is useful for subtle effects that should not bleed past the edges.

Custom colors

The shadow color accepts any CSS color value, so you are not limited to black. Hex, RGB, RGBA, and HSL all work, which means you can tint a shadow to match your palette.

.panel {
  box-shadow: 0 4px 8px 0 hsla(210, 50%, 50%, 0.5);
}

A coloured shadow like this, a soft semi-transparent blue here, can add a branded glow or a sense of mood that a plain grey shadow never would, though it is best used sparingly so it reads as intentional rather than accidental.

A practical example: the elevated card

Box shadows really come alive when combined with a transition for interactivity. A common pattern is a card that sits gently raised and lifts further when hovered.

.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
              0 6px 20px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2),
              0 12px 30px rgba(0, 0, 0, 0.2);
}

At rest the card uses two stacked shadows, a tighter close shadow and a softer wider one, which together mimic how a raised object casts both a sharp near shadow and a diffuse far one. On hover the offsets, blur, and opacity all increase, and because the box-shadow change is animated by the transition, the card appears to rise smoothly toward the cursor. That small motion is what makes an interface feel responsive and alive.

Using shadows well

A few principles keep box shadows looking professional. Subtlety usually wins, so reach for soft, low-opacity shadows that suggest depth rather than shout it. Keep them consistent, using the same shadow settings across similar elements so cards, buttons, and modals share one visual language rather than each inventing its own. Watch performance, because very large or heavily layered shadows can tax rendering on lower-end devices, so do not pile them on without reason. Combine them with transitions and transforms for interactive states, as the card above does, since that is where they feel most modern. And test across browsers and devices, because while support is excellent everywhere, it is worth confirming your shadows read the way you intend on different screens.

Conclusion

Box shadows are a small property with a large payoff. With nothing more than a few offsets, a blur, an optional spread, and a color, you can lift elements off the page, press them in with inset, layer several shadows for natural depth, tint them to your brand, and animate them for interactive lift. They need no images, scale cleanly, and are supported everywhere, which makes them one of the most useful tools in your styling toolkit. Used with a light touch and a consistent hand, they turn a flat layout into one with genuine dimension.

See you soon.