Box and Text Shadow with CSS

The ‘box shadow’ property applies a shadow with the parameters you specify to the box model container that matches the selector that you have written in CSS. You can play with the selector here.

The ‘text shadow’ property applies a shadow to all of the text nodes within the div that matches your css selector. You can play with the selector here.

box-shadow (left), text-shadow (right)

There is a lot of depth to these two selectors that you may not have yet been exposed to, so I wanted to go into a few cool use cases for text and box shadow properties.

1. The Card Effect!

Because both of these properties can accept multiple arguments, separated with a comma, you can easily duplicate the div (in terms of display) without adding any HTML. (ref)

2. Negative Padding, Expanded div are

When you need to extend your divs background outside of the div and into that of the parent, you don’t have a lot of options when it comes to the traditional box model. A box shadow set to no offset and a high “spread” can help you achieve this. (ref)

box-shadow: 0px 0px 0px $padding brown;

3. Text Effects

Text effects can give your UI a really cool feel. There are lots of ways to use the text-shadow property to give your text crazy effects.

https://codepen.io/havardob/pen/WNQwvze?editors=1100
https://codepen.io/azitowolf/pen/gOrVooL?editors=1100

Thanks for reading!

Alex Zito-Wolf

Credit for inspiration goes to Steve Griffith.

Product Manager + Software Developer. Interested in Travel, Culture, and the Internet.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store