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
All classes names are available for use
.box-shadow-down-1.box-shadow-up-1.box-shadow-right-1.box-shadow-left-1.box-shadow-centered-1.box-shadow-down-2.box-shadow-up-2.box-shadow-right-2.box-shadow-left-2.box-shadow-centered-2.box-shadow-down-3.box-shadow-up-3.box-shadow-right-3.box-shadow-left-3.box-shadow-centered-3.box-shadow-down-4.box-shadow-up-4.box-shadow-right-4.box-shadow-left-4.box-shadow-centered-4.box-shadow-down-5.box-shadow-up-5.box-shadow-right-5.box-shadow-left-5.box-shadow-centered-5Example mixin usage
@include pgn-box-shadow(1, “down”);@include pgn-box-shadow(1, “up”);@include pgn-box-shadow(1, “right”);@include pgn-box-shadow(1, “left”);@include pgn-box-shadow(1, “centered”);@include pgn-box-shadow(2, “down”);@include pgn-box-shadow(2, “up”);@include pgn-box-shadow(2, “right”);@include pgn-box-shadow(2, “left”);@include pgn-box-shadow(2, “centered”);@include pgn-box-shadow(3, “down”);@include pgn-box-shadow(3, “up”);@include pgn-box-shadow(3, “right”);@include pgn-box-shadow(3, “left”);@include pgn-box-shadow(3, “centered”);@include pgn-box-shadow(4, “down”);@include pgn-box-shadow(4, “up”);@include pgn-box-shadow(4, “right”);@include pgn-box-shadow(4, “left”);@include pgn-box-shadow(4, “centered”);@include pgn-box-shadow(5, “down”);@include pgn-box-shadow(5, “up”);@include pgn-box-shadow(5, “right”);@include pgn-box-shadow(5, “left”);@include pgn-box-shadow(5, “centered”);Example variables usage
box-shadow: $level-1-box-shadow;box-shadow: $level-2-box-shadow;box-shadow: $level-3-box-shadow;box-shadow: $level-4-box-shadow;box-shadow: $level-5-box-shadow;Box-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: 10px 10px 20px #000;