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