CSS

CSS Shadows: A Deep Dive Part 2 – box-shadow

Posted onAuthorRotem Horovitz
CSS Shadows Part 2: box-shadow
Reading Time: 3 minutes

Welcome to part 2 of my deep dive into Shadows in CSS.

Contents

  1. text-shadow basics
  2. box-shadow basics You are Here!
  3. filter:drop-shadow (coming soon)
  4. Diving even deeper (coming soon)

box-shadow



The box-shadow CSS property is used to add shadow effects around an element’s frame. You can specify multiple effects separated by commas if you wish to do so. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color. (MDN)



Just like with text-shadow, the first two values are horizontal and vertical offset. These values can be in almost any unit (with the exception of %), positive or negative. Positive values will cast shadow to the right of the text horizontally, and below the text vertically.

The third value, blur radius is an optional value which can be specified but is not required. It’s the number of pixels the shadow is stretched which causes a blur effect. If you don’t use the third value – the default blur radius is zero.

The fourth value sets spread radius. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

The fifth value sets the shadow’s color. You can use any acceptable color value here: color names, HEX, RGBa, HSLa, etc.

Note: spread radius cannot be specified without first specifying the blur radius.



Simply put, you can specify two, three or four length values:
If you specify 2 values, they will be interpreted as horizontal and vertical offset. A third value will apply the blur radius and the fourth will apply the spread radius.

The inset Keyword

Unlike text-shadow, which only allows us to cast a drop shadow, box-shadow has another optional keyword. If specified, inset drops the shadow inside the element (designers and photoshop users might refer to is as “inner shadow“). The inset keyword can be specified before or after the other values (but not between them):

DIV {
    box-shadow: 1px 1px 1px 1px #000 inset;
    /* is the same as */
    box-shadow: inset 1px 1px 1px 1px #000;
}

Here’s a quick demo.

See the Pen box-shadow (inset demo) by Lurx (@lurx) on CodePen.

Multiple box-Shadow

Obviously, just like text-shadow, you can set multiple shadows with a comma-separated list of values:

See the Pen box-shadow (multiple shadows demo) by Lurx (@lurx) on CodePen.

Transparency

When working with box-shadow, it’s important to remember that the shadow will be hidden behind the element even if the element’s background-color is set to transparent:

See the Pen box-shadow (transparent demo) by Lurx (@lurx) on CodePen.

And, as you can see, since text-shadow is its own property, box-shadow does not affect the text (and other children) of your element.

As the property name does suggest, it only applies to the box itself, not its contents.

In the next post, we’ll look at the newer filter and its drop-shadow function, see what it can do, and what the differences are between box-shadow and filter: drop-shadow(). Until then…


Read more about box-shadow:
This post was originally published as a CodePen post on May 22, 2018