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







Box-shadow Usage

Include these box-shadows colors in scss files in this ways:


pgn-box-shadow($level, $side)
Direction namedownuprightleftcentered

Box-shadows elevation levels


Example classes usage

Classes are available with following pattern:


For example:


Example 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:


For example:


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: 0px 0px 0px #000;