HomeTutorsContact

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

  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

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.

Free Resources

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

Thanks for reading!! 😃


Tags

#css
Previous Article
How To Rotate Image In CSS?

Gulshan Saini

Fullstack Developer

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.

Related Posts

How to use CSS custom variables and properties?

June 06, 2020
2 min
© 2020, All Rights Reserved.

Quick Links

Advertise with usContact Us

Social Media