Box-shadow property values

HTML-CSS
1

Hi,

I’m currently going through Applied Visual Design and I there is a challenge to create a box shadow. I can create the code but what I don’t understand is the example used:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Firstly what does the 0 at the beginning represent? The instructions show the layout as

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

However the first value seems to represent blur-radius?

And secondly why do you need two box shadows?

Any help is much appreciated, thanks.

2

The 0 is for the offset-x value. If you remove the blur and give it a larger value it should be pretty obvious what it is doing. The dev tools also have a live edit widget for the box-shadow you can play with.

You can use multiple box-shadows to create more “refined” shadows.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

1 Like
3

Thanks for getting back to me, appreciate it. Just as a follow up, if the “0” is for “offset-x” why doesn’t it have a “px” unit like the “offset-y” and “blur radius”?

4

It is using a number as the data type, which is unitless.

For most zero values you can use the unitless version. It’s really more of a personal preference so if you would like to use 0px instead you can.

https://www.w3.org/TR/css-values-4/#numeric-types

5

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