Apply CSS Box Shadow the right way + FREE Resources

Hello my wonderful friend, welcome to this tutorial!
Today, I'll be explaining CSS Box Shadow and I will also be sharing different cool resources that will help you add box shadow to elements on your website in no time!

Stick with me till the end! 🍻

What exactly is Box Shadow?

Box-shadow is a CSS property that adds shadow effects around an element's frame, and you can set multiple effects separated by commas.

Here is the syntax:

box-shadow: [optional inset] [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Box Shadow takes all other measurement types except for percentages %

What exactly do each of these box shadow effects mean?

1. Inset:

This is an optional keyword. The presence of the inset keyword changes the shadow direction to be inside the frame, instead of its default outward appearance.

2. Horizontal Offset:

This represents the shadow on the right of the element. When it is positive, it means the shadow will be on the right of the box, while a negative value will put the shadow on the left of the box. It is compulsory.

The image below shows the effect of the horizontal offset (30px) and the inset property.
Notice that the inset property changes the direction of the box-shadow just like the negative horizontal offset.

3. Vertical Offset:

This represents the shadow at the bottom of the element. When it is positive, it means the shadow will be at the bottom, while a negative value will put the shadow on top of the box. It is also a compulsory value.

Here is an another example similar to Horizontal offset

4. Blur Radius:

This adds some opacity to the color of the shadow. The default value is zero. If set to 0 or not specified, the shadow will be sharp. The higher the number or value, the more blurred it will be. It is optional.

5. Spread Radius:

This determines the size of the shadow. The larger the value, the larger the shadow. Also, where its length ends is where the blur begins. Positive values increase the size of the shadow, negative values decrease the size. Its default value is 0 (same size as blur radius).

Let's check out some use cases of CSS Box Shadow

Interesting Box Shadow Examples on Codepen 🚀

💯 FREE Resources to get Up & Running with CSS Box Shadow 🚀

1. Neumorphism
2. Box Shadow Art
3. Box Shadow CSS Generator
4. Box Shadow

Thank you for reading till the end.

Feel free to follow for more interesting and educative posts and also Connect with me on
🚀 Linkedin
🚀 Twitter