Shadows

All Samples

Raised Shadow

Lifted Shadow

Vertical Curves

Horizontal Curves

Vertical Shine

Horizontal Shine

Single Shine

Single Curve

Paper Shadow

Pseudo-Raised Shadow

Perspective Shadow

Raised Shadow

Raised Shadow

Raised Shadow via Box-Shadow .. no other box-shadows possible !
usage raised_shadow( color, times, horizontal, vertical, blur, size );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 3 ✔
horizontal Pixel 3px | 0 0 ✔
vertical Pixel 3px | 0 10px ✔
blur Pixel 3px | 0 10px ✔
size Pixel 3px | 0 -10px ✔
this @include raised_shadow( rgba(0, 0, 0, 0.5), 5 );

Raised Shadow

@include raised_shadow( rgba(102, 53, 53, 0.5), 5 );

Raised Shadow

@include raised_shadow( rgba(102, 53, 53, 0.5), 5, -10px, 0 );


Lifted Shadow

! Wrapper needs: "position: relative; z-index: 1" !

Lifted Shadow

Lifted Shadow via :before & :after Pseudo-Elements .. other box-shadows still possible !
usage lifted_shadow( color, times, horizontal, vertical, blur, size );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 3 ✔
horizontal Pixel 3px | 0 0 ✔
vertical Pixel 3px | 0 15px ✔
blur Pixel 3px | 0 10px ✔
size Pixel 3px | 0 1 ✔
this @include lifted_shadow( rgba(0, 0, 0, 0.5), 2 );

Lifted Shadow

@include lifted_shadow( rgba(102, 53, 53, 0.5), 5 );

Lifted Shadow

@include lifted_shadow( rgba(204, 0, 0, 0.5), 2 );


Vertical Curves

! Wrapper needs: "position: relative; z-index: 1" !

Vertical Curves

Vertical Curves via :before Pseudo-Elements .. other box-shadows still possible !
usage vertical_curves( color, times, horizontal, vertical, blur, size );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 3 ✔
horizontal Pixel 3px | 0 0 ✔
vertical Pixel 3px | 0 0 ✔
blur Pixel 3px | 0 15px ✔
size Pixel 3px | 0 0 ✔
this @include vertical_curves( rgba(0, 0, 0, 0.42), 3 );

Vertical Curves

@include vertical_curves( rgba(102, 53, 53, 0.5), 5 );

Vertical Curves

@include vertical_curves( rgba(204, 0, 0, 0.5), 2 );


Horizontal Curves

! Wrapper needs: "position: relative; z-index: 1" !

Horizontal Curves

Horizontal Curves via :before Pseudo-Elements .. other box-shadows still possible !
usage horizontal_curves( color, times, horizontal, vertical, blur, size );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 3 ✔
horizontal Pixel 3px | 0 0 ✔
vertical Pixel 3px | 0 0 ✔
blur Pixel 3px | 0 15px ✔
size Pixel 3px | 0 0 ✔
this @include horizontal_curves( rgba(0, 0, 0, 0.42), 3 );

Horizontal Curves

@include horizontal_curves( rgba(102, 53, 53, 0.5), 5 );

Horizontal Curves

@include horizontal_curves( rgba(204, 0, 0, 0.5), 2 );


Vertical Shine

! Wrapper needs: "position: relative; z-index: 1" !

Vertical Shine

Vertical Shine via :before & :after Pseudo-Elements .. other box-shadows still possible !
usage vertical_shine( color, times, width, blur, size );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 1 ✔
width Pixel 3px | 0 3px ✔
blur Pixel 3px | 0 10px ✔
size Pixel 3px | 0 0 ✔
this @include vertical_shine( rgba(0, 0, 0, 0.3), 2 );

Vertical Shine

@include vertical_shine( rgba(102, 53, 53, 0.5), 5 );

Vertical Shine

@include vertical_shine( rgba(204, 0, 0, 0.5), 2 );


Horizontal Shine

! Wrapper needs: "position: relative; z-index: 1" !

Horizontal Shine

Horizontal Shine via :before & :after Pseudo-Elements .. other box-shadows still possible !
usage horizontal_shine( color, times, width, blur, size );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 1 ✔
width Pixel 3px | 0 3px ✔
blur Pixel 3px | 0 10px ✔
size Pixel 3px | 0 0 ✔
this @include horizontal_shine( rgba(0, 0, 0, 0.3), 2 );

Horizontal Shine

@include horizontal_shine( rgba(102, 53, 53, 0.5), 5 );

Horizontal Shine

@include horizontal_shine( rgba(204, 0, 0, 0.5), 2 );


Single Curve

! Wrapper needs: "position: relative; z-index: 1" !

Single Curve

Single Curve via :before Pseudo-Elements .. other box-shadows still possible !
usage single_curve( color, times, position, width, blur, size, corner );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 1 ✔
position position top | left left ✔
width Pixel 3px | 0 5px ✔
blur Pixel 3px | 0 10px ✔
size Pixel 3px | 0 0 ✔
corner number 50 | 100 50 ✔
this @include single_curve( rgba(0, 0, 0, 0.5), 2 );

Single Curve

@include single_curve( rgba(102, 53, 53, 0.5), 5 );

Single Curve

@include single_curve( rgba(204, 0, 0, 0.5), 2 );


Single Shine

! Wrapper needs: "position: relative; z-index: 1" !

Single Shine

Single Shine via :before Pseudo-Elements .. other box-shadows still possible !
usage single_shine( color, times, position, width, blur, size, corner );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 1 ✔
position position top | left right ✔
width Pixel 3px | 0 5px ✔
blur Pixel 3px | 0 10px ✔
size Pixel 3px | 0 0 ✔
corner number 50 | 100 50 ✔
this @include single_shine( rgba(0, 0, 0, 0.5), 2 );

Single Shine

@include single_shine( rgba(102, 53, 53, 0.5), 5 );

Single Shine

@include single_shine( rgba(204, 0, 0, 0.5), 2 );


Paper Shadow

! Wrapper needs: "position: relative; z-index: 1" !

Paper Shadow

Paper Shadow via :before Pseudo-Elements .. other box-shadows still possible !
usage paper_shadow( color, times );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 1 ✔
this @include paper_shadow( rgba(0, 0, 0, 0.5), 2 );

Paper Shadow

@include paper_shadow( rgba(102, 53, 53, 0.5), 5 );

Paper Shadow

@include paper_shadow( rgba(204, 0, 0, 0.5), 2 );


Pseudo Raised Shadow

! Wrapper needs: "position: relative; z-index: 1" !

Pseudo Raised Shadow

Pseudo Raised Shadow via :before Pseudo-Elements .. other box-shadows still possible !
usage pseudo_raised_shadow( color, times, gap, radius, horizontal, vertical, blur, size );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 3 ✔
gap Pixel 3px | 0 10px ✔
radius Pixel 3px | 0 3px ✔
horizontal Pixel 3px | 0 0 ✔
vertical Pixel 3px | 0 5px ✔
blur Pixel 3px | 0 5px ✔
size Pixel 3px | 0 0 ✔
this @include paper_shadow( rgba(0, 0, 0, 0.5), 3 );

Pseudo Raised Shadow

@include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 30px, 10px, 0, 10px );

Pseudo Raised Shadow

@include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 10px, 10px, 20px, 10px );


Perspective Shadow

! Wrapper needs: "position: relative; z-index: 1" !

Perspective Shadow

Perspective Shadow via :before Pseudo-Elements .. other box-shadows still possible !
usage perspective_shadow( color, times, degre, blur );
option value sample default optional
color rgba | hex rgba(0,0,0,.5) | #333 - ✘
times number 1 - 9 3 ✔
degre degree 50 | 30 30 ✔
blur Pixel 3px | 0 10px ✔
this @include perspective_shadow( rgba(0, 0, 0, 0.42), 1, 30, 3px );

Perspective Shadow

@include perspective_shadow( rgba(102, 53, 53, 0.5), 5, 50, 5px );

Perspective Shadow

@include perspective_shadow( rgba(204, 0, 0, 0.5), 2, 42, 10px );