How To Give Box Shadow In CSS?

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

Syntax

box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

• <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

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

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

box-shadow: 3px 3px 10px grey;

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

<blockquote style="box-shadow: 3px 3px 10px grey">
  It is a long established fact that a reader will be distracted by the readable
  content of a page when looking at its layout.
</blockquote>

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

li { box-shadow: 5px 5px 5px grey }

1. One
2. Two
3. Three

Adding Multiple Box shadows

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

box-shadow: -9px 0px 12px -7px #000000, 9px 0px 12px -7px #000000,
  5px 5px 15px 5px rgba(0, 0, 0, 0);

Updated markup

<blockquote
  style="box-shadow: -9px 0px 12px -7px #000000, 9px 0px 12px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0)"
>
  It is a long established fact that a reader will be distracted by the readable
  content of a page when looking at its layout.
</blockquote>

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.

<blockquote style="box-shadow: inset 3px 3px 10px grey">
  It is a long established fact that a reader will be distracted by the readable
  content of a page when looking at its layout.
</blockquote>

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.

Free Resources

You can play online with some of the tools mentioned below to generate cool effect using box-shadow

• https://html-css-js.com/css/generator/box-shadow/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
• https://cssgenerator.org/box-shadow-css-generator.html
• You can even generate very soft neumorphic box shadows using https://neumorphism.io/#55b9f3

Thanks for reading!! 😃