Shadows

There are three different ways to create shadows with CSS:

• box-shadow
• text-shadow
• filter: drop-shadow()

They all work in very similar ways, with a few key differences.

box-shadow

This is the most commonly used of the three, and as the name implies, it add a shadow behind the box of the element that is creating it.

The box-shadow property accepts 6 values:

1. inset (optional)
2. x offset
3. y offset
4. blur (optional)
5. spread (optional)
6. color

.a-simple-box-shadow {
  box-shadow: 10px 10px 20px rgb(0 0 0 / 0.25);
}

.a-solid-shadow {
box-shadow: -10px -10px rgb(0 0 0 / 0.25);
}

.an-inset-box-shadow {
box-shadow: inset 0 0 20px rgb(0 0 0 / .25);
}

.shadow-with-spread{
box-shadow: 0 0 20px 30px rgb(0 0 0 / .25);
}

In general, the larger the blur, the higher the element will look. Changing the offsets can change where the light source would be coming from.

You can have mutltiple shadows

You can have comma-separated list of shadows, allow you to have multiple on one element. This might seem a little strange, but it can result in much more realistic shadows.

You do want to be careful though, too many shadows can have an impact on performance.

.multiple-shadows {
  box-shadow: 5px 5px 10px rgb(0 0 0 / 0.2), 8px 8px 15px rgb(0 0 0 / 0.15),
    12px 12px 25px rgb(0 0 0 / 0.1);
}

Text shadows

The text-shadow property works similarly to drop shadows, but it only accepts four values:

• x offset
• y offset
• blur
• color

Drop shadows

We can also use the filter property to create a shadow, using the drop-shadow() value function. Like text-shadow it only accepts four values:

• x offset
• y offset
• blur
• color

It has one key difference though, it doesn’t create the shadow on the elements box, but one that conforms to the shape of the image or shape you are applying it to.

Technically, drop-shadow() should be more performant as filter is hardware accelerated, but results might vary by browser, and complex shapes do require more work from the browser.

Create nicer shadows

Josh Comeau has a very nice Shadow Palette Generator to create several elevations with a consistent offset for the light source. I’d also encourage you to read his full article on what makes a nice drop shadow.