Sass mixin material box shadow from all sides of element

materialdesignshadowsassscss

Sass mixin material box shadow from all sides of element Tutorial by Mirko Zovko | 22. Mar. 2020.

Material design is one of the most popular web design. Google developed it in 2014 and until now he applied that design in almost all of his applications. One of the biggest characteristic of material design is specific box shadow of html elements, as we call it material shadow.
In this tutorial I created simple SASS mixin for material box shadow that allow you to simple put material shadow on element from any side. You can chose to put shadow on top, left, right, bottom, or on middle so it can be visible from all sides of element. Except that you can chose 5 levels of shadow, starting from low shadow to high shadow.