Skip to main content
Dublin Library

The Publishing Project

Playing with box-shadows


In developing a card with box-shadow I realized that it's harder than I remembered so I decided to take another look.

Box shadow takes two, three or four parameters.

If two values are specified, they are interpreted as offset-x (horizontal offset) and offset-y (vertical offset) values.
Negative offset-x value places the shadow to the left of the element. Negative offset-y value places the shadow above the element.
If not specified, the value of 0 is used for the missing length. If both offset-x and offset-y are set to 0, the shadow is placed behind the element (and may generate a blur effect if blur-radius and/or spread-radius is set).
If three values are specified, the third value is interpreted as blur-radius.
The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed.
If not specified, it will be set to 0 (meaning that the shadow's edge will be sharp).
If four values are specified, the fourth value is interpreted as spread-radius.
Positive values will cause the shadow to expand and grow bigger. Negative values will cause the shadow to shrink.
If the fourth value is not specified, it will be set to 0 (that is, the shadow will be the same size as the element).

The explanation kind of works but I need a visual representation so I created a visualizer in Codepen.

The parameters in the visualizer match the descriptions provided above.

So far we've only discussed a single box shadow. You can add multiple box-shadow instances separated by commas to create more complex effects surrounding your boxes of content.

It is also important to note that box-shadow is different from text-shadow. box-shadow works on the box around the text and text-shadow works on the text itself.

Edit on Github