Ritvik Dubey

Posted on Sep 8, 2020 • Edited on Sep 23, 2020

Box Shadow in CSS (Part-1)

#css #webdev #beginners

When thinking of designing a website, the thing I'm always most excited about is using box-shadow. Box shadow seems to be a simple topic but actually it is a very vast topic. I will conclude it in 3 parts from 0 to best the I can. So this blog is about the basics of the box-shadow.

Let's understand what box-shadow actually do. In simple words box-shadow property adds the shadow effect to the border of the element, this element can be a div, a button, an image or any other element.
A box-shadow consists X-offset and Y-offset values of the shadow, blur-radius of the shadow, spread radius of the shadow and the color of the shadow.

box-shadow: X-offset Y-offset blur-radius spread-radius color;

A single element can also have multiple shadows.

Remember you cannot use % values in box-shadows.

Let's understand each of them better :-

1. X-offset :-

This is the horizontal offset of the shadow. The positive value of this offset means shadow will be formed in right of the element and negative value of this offset means shadow will be formed in left of the element. This value is not optional but you can pass zero value if you don't want to have a horizontal shadow.

2. Y-offset :-

This is the vertical offset of the shadow. The positive value of this offset means shadow will be formed below the element and negative value of this offset means shadow will be formed above the element. This value is not optional but you can pass zero value if you don't want to have a vertical shadow.

3. Blur-radius :-

This value manages the sharpness of the shadow formed. If it's value is zero then shadow will be sharpest and if it's value is higher the shadow will be more blurry. It's negative value is not accepted. This value is optional.

4. Spread-radius :-

This value manages the size of the shadow. If you pass this value you will find that the size of the shadow increases according to the spread-radius that means it increases the spread of shadow. You can use the negative value to shrink the shadow. If spread radius is 0 ,i.e. no size has been defined for shadow then the shadow will be same size as that of blur radius. This value is optional.

5. Color :-

This value let's you customize the color of the shadow. You can pass any color value or any name or any code or in any of the color unit. This value is optional.
Tip :- It's better to use rgba() unit so that you can define how transparent can be the color of the shadow.

Inset :-

If you use inset keyword while defining the shadow measurements then the shadow will be made inside the element. Inset shadow are drawn inside the border of the frame and they are above the background. This value is optional.

Let's understand it better with examples-

# Using the positive offsets -

box-shadow: 10px 10px;

As you can see we have used positive X-offset and Y-offset so the shadow is formed in bottom and right of the div.

# Using the negative offsets -

box-shadow: -10px -10px;

As you can see we have used the negative X-offset and Y-offset so the shadow is formed in top and left of the div.

# Using the blur-radius -

box-shadow: 10px 10px 10px;

As you can see we have used the blur-radius which have made our shadow blur upto 10px. In the above examples we haven't used blur-radius so the shadows are very sharp.

# Using the spread-radius -

box-shadow: 10px 10px 0px 10px;

As you can see we have used the spread-radius which have increased size of our shadow by 10px. We can't use spread-radius without blur-radius so we have kept the value of blur-radius 0.

# Using the color -

box-shadow: 10px 10px blue;

As you can see the shadow is in blue color. We can use any color instead just by putting the color name or code or any other unit.

# Using the inset -

box-shadow: inset 10px 10px;
box-shadow: inset 10px 10px blue;

As you can see the shadow is formed over the div or you can say inside the div. It can also be given all the properties we have used in other examples.

# Using multiple shadows -

box-shadow: 10px 10px, -10px -10px;

As you can see there are two shadows formed here. For better differentiation there are two different colors given to the shadows.
In the first shadow which is red, both the offsets are given positive values so the shadow is formed on top and right.
In the second shadow which is blue, both the offsets are given negative values so the shadow is formed on top and left.

# Using the shadow with border-radius -

border-radius: 10px;
box-shadow: 10px 10px;

As you can see the shadow formed here has taken on those corner which are rounded by using border-radius property.

To learn more about box-shadow you can check the part-2 here.

There is also the text-shadow property and drop-shadow we will discuss them in other parts.

You can check my pens at CodePen here I have some awesome work done with box-shadow

Thanks for reading this article.

Any feedback would be greatly appreciated.

Connect with me on Twitter or LinkedIn

Top comments (20)

Wayne Whitaker • Sep 9 '20

Good, concise article. I did not know about the "inset" setting before. I expect the inset shadow looks better if two sides have a fairly strong shadow, and the other two sides have a smaller shadow (rather than no shadow at all).