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.
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.
Thanks for reading!
Credit for inspiration goes to Steve Griffith.