Skip to Content

diffuse-shadow()

Layer box shadow effects for a more realistic appearance.

Sass October 20, 2019

Usage

Sass
diffuse-shadow($size, $color, $multiply)

Parameters

$size
(Required) (Integer) How many layers of shadow to use
Default: None

$color
(Optional) (Color) The color of the shadow
Default: rgba(0, 0, 0, 0.125)

$multiply
(Optional) (Boolean) Increment the layers by 2
Default: false

Request or provide clarification »

Examples

Use default values with 4 layers

Sass
.element {@include diffuse-shadow(4);}
Sass
.element {@include diffuse-shadow(8, rgba(0, 0, 0, 0.25), true);}

Additional Notes

Original inspiration by Tobin Ahlin and mixin by Mark Otto.

Source File

Located in /assets/scss/partials/_mixins.scss on line 226.

Sass
@mixin diffuse-shadow($size, $color: rgba(0, 0, 0, 0.125), $multiply: false){
    $val: 0 1px 1px $color;
    @for ( $i from 1 through $size ){
        @if ( $i % 2 == 0 ){
            @if ( $multiply == true ){
                $i: $i * 2;
            }
            $val: #{$val}, 0 #{$i}px #{$i}px #{$color};
        }
    }

    box-shadow: $val;
}

Override

To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

Sass
@mixin diffuse-shadow($size, $color, $multiply){
    //Write your own code here, leave it blank, or return false.
}