Box Shadow CSS explanation

HTML-CSS
1

Can anybody explain what the last 2 parameters of the box-shadow CSS property are? I don’t think I really understood what they meant.

2

Well, you are asking about this lesson https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.

The box-shadow property takes values for

offset-x (how far to push the shadow horizontally from the element),
offset-y (how far to push the shadow vertically from the element),
blur-radius,
spread-radius and
color, in that order.
The blur-radius and spread-radius values are optional

If you mean blur-radius and spread-radius by last two parameters,
blur-radius is basically meant to blur the box-shadow that you create by using horizontal and vertical offsets.

You can experiment a bit to see how it works.

#thumbnail {
  box-shadow: 5px 5px red;
}

using the above code, you can create a solid red shadow. but when you add blur-radius to it, the above shadow gets blurred.

#thumbnail {
  box-shadow: 5px 5px 5px red;
}

compare these two and you will see the difference.

spread radius simply increases or decreases the size of shadow. a positive value makes it larger and the negative value smaller.

#thumbnail {

  box-shadow: 5px 5px 5px 10px red;

}

You can see the size of shadow has increased and has spread all around. similarly, you can use negative value to see its impact.

color simply gives color to the shadow.

I hope that helps.
Play with code to see what it does the html element to understand the core concept till you understand it.

1 Like
3

Thanks! But won’t offset-x and offset-y affect the shadow size?

4

Okay. I will explain them one by one for you:

offset-x specifies the distance by which the shadow is shifted to the left or right of the element.
PAY ATTENTION. Shifted to left or right of the element.

offset-y specifies the distance by which the shadow is shifted to the bottom or top of the element.
PAY ATTENTION.shifted to the bottom or top of the element.

whereas spread radius ===> expands the shadow in all directions by the specified radius, negative value causes it to shrink. Default is zero.

1 Like
5

You can play around with box-shadows here: https://cssboxshadow.com/

1 Like
6

I got it! Thank you!

7

Thanks for the link!

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.