Box Shadow

Utilities for controlling the box shadow of an element.

Class Properties
.shadow1 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
.shadow2 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
.shadow3 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
.shadow4 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
.shadow5 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

Usage

Use the .shadow{step} utilities to apply different sized outer box shadows to an element.

.shadow1

.shadow2

.shadow3

.shadow4

.shadow5

Customization

All available box shadows are defined in _settings.scss.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.