Elevation & Shadow
You can quickly add a box-shadow with the Clickable Box-Shadow Grid. Click on the box-shadow you like and it will be copied to your clipboard.
Level 1
Level 2
Level 3
Level 4
Level 5
Direction
Down
Up
Right
Left
Centered
Box-shadow Usage
Include these box-shadows colors in scss files in this ways:
Mixin
pgn-box-shadow($level, $side)| Direction name | downuprightleftcentered |
| Levels Box-shadows elevation levels | 12345 |
Example classes usage
Classes are available with following pattern:
.box-shadow-{direction}-{level}For example:
.box-shadow-right-2.box-shadow-up-3Example mixin usage
Mixin can be used as follows:
@include pgn-box-shadow(level, side);For example:
@include pgn-box-shadow(1, "down");@include pgn-box-shadow(3, "left");Example variables usage
Variables are available with following pattern:
$box-shadow-{direction}-{level}For example:
$box-shadow-right-2$box-shadow-up-3Box-shadow generator
Use the sliders and the color picker to set the values and watch the live preview until you reach the desired effect. Select the right-down shift, spread, blur, and color. Pick a custom color for the preview background and your object. Web browsers allow us to add more than one shadow to our design and so does this online tool. Use the Add New Layer button to save the current line and set up a new one.
box-shadow: 0px 0px 0px #000;