DEV Community

loading...
Cover image for Box Shadow in CSS (Part-1)

Box Shadow in CSS (Part-1)

ritvikdubey27 profile image Ritvik Dubey ・Updated on ・4 min read

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

Discussion (20)

Collapse
wwfromga profile image
Wayne Whitaker

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).

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank You. Yes using inset can make a website look awesome. Yes that would look great.

Collapse
cyndiekamau profile image
Cyndie Kamau

Nice work Ritvik! 😊😊😊 This will be really helpful!

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much. I'm glad you found it helpfulπŸ˜‡πŸ˜‡

Collapse
thisismanaswini profile image
Manaswini

Very well written and easy to understand!!

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much..!!!

Collapse
joshwassing profile image
Joshua Wassing

Enjoyed this article! Always nice to have a quick review of these properties that I use so often.

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Yes having them at a place really helps.πŸ˜‡

Collapse
ozakaran profile image
πŸ†– Karan Oza

Good and concise... Helpful for CodeNewbies πŸ‘Œ

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so muchπŸ˜‡ Yes made this for Code Newbies. Following your path to help others with the best i know.!

Collapse
andrewbaisden profile image
Andrew Baisden

Good article i like the codepen visuals they help a lot.

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank You, yes added codepen visuals so that it can be easily understandable.

Collapse
ayomiku222 profile image
ayomiku olatunji

Thanks so much.... You really explain it to me... Appreciative

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

I'm glad you found it helpful.! Thank you..!!☺️

Collapse
__akash__19 profile image
Akash bhandwalkar

Wonderful Article Ritvik. πŸ™‚

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you so much brother.☺️

Collapse
error404sp profile image
Shreyasi Patil

Great article Ritvik

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

Thank you ShreπŸ˜‡

Collapse
chrstnfrrs profile image
Christian Farris

This is a really good article! I appreciate you breaking everything down!

Collapse
ritvikdubey27 profile image
Ritvik Dubey Author

I'm glad you found it helpful. Thank YouπŸ˜‡

Forem Open with the Forem app