How To Give Box Shadow In CSS?

By Gulshan Saini

Published in CSS

May 18, 2020

1 min read

The box-shadow property defines the shadow of an element. The syntax of box-shadow is similar to css text shadow

Syntax

<inset> - Optional. If ommited, shadow is assumed to be a drop shadow
<offset-x> - Positive value push shadow to right and negative to left
<offset-y> - Positive value push shadow to bottom and negative to top
<blur-radius> - Optional. Lesser the value, hard is the shadow where as higher the
<spread-radius> - Optional. 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
<color> - Optional. Any valid web font color

We can apply multiple shadow effects to element by defining multiple comma separated shadow values.

Drop Shadow Example

Let’s first create an element on which we can apply box-shadow

Output

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

To add more visual effect to the container we are going to apply box-shadow using below styles

In plain English, we are applying 3px shadow to bottom and right respectively with 10px blur radius to have smooth shadow using color or grey

For demonstration, I am using inline styles

Output

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Wow, the container now looks more appealing and lifted. You can play with blur radius to create different effects

Here, is another one I like to create hard border on bottom and right

One
Two
Three

Adding Multiple Box shadows

Let’s go back to our initial example and apply multiple shadows using below styles

Updated markup

Output

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Inset Shadow Example

Another extra box-shadow feature that makes it more flexible than text-shadow is the inset keyword. When we specify the inset keyword while defining shadow, it changes the shadow from an outer shadow (outset) to an inner shadow.

Going back to the first example - now we will just add inset keyword in styles as shown below and rest or markup remain the same.

Output

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

If you compare, the output of drop shadow and inset shadow you can see, the inset shadow creates a deboss effect whereas the drop shadow creates an emboss effect.