Shadow

Add or remove shadows to elements with box-shadow utilities.

¶Usage

¶Outer shadows

<div class="shadow">...</div>

¶Inset shadows

<div class="shadow-inset">...</div>

¶Remove shadows

<div class="shadow-none">...</div>

¶Responsive

Responsive variations also exist for each shadow value. Use the .shadow-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing shadow utility.

<div class="shadow-md-5 ..."></div>

¶Customizing

¶Values

The values for shadow utilities can be customized using the theme's config file:

$theme: (
    shadow: (
        values: (
            null: $box-shadow,
            1: $box-shadow-sm,
            2: $box-shadow-lg,
            3: $box-shadow-xl,
            4: $box-shadow-2xl,
            5: $box-shadow-3xl,
            6: $box-shadow-4xl,
            inset: $box-shadow-inset,
            outline: $box-shadow-outline,
            focus: $box-shadow-focus,
            none: none
        )
    )
);

¶States

Use the state option to generate pseudo-class variations. Example pseudo-classes are :hover and :focus. When a list of states are provided, classnames are created for that pseudo-class.

$theme: (
    shadow: (
        state: active
    )
);

¶Disabling

Remove any of the default utilities associated with the shadow by setting the group key to false.

$theme: (
    shadow: (
        disable: true
    )
);