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) andoffset-y(vertical offset) values. - Negative
offset-xvalue places the shadow to the left of the element. Negativeoffset-yvalue places the shadow above the element. - If not specified, the value of 0 is used for the missing length. If both
offset-xandoffset-yare set to 0, the shadow is placed behind the element (and may generate a blur effect ifblur-radiusand/orspread-radiusis 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.