Shadow

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


Class
Properties
shadow
shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
shadow-6
shadow-inset
shadow-outline
shadow-focus
shadow-none

Usage

Outer shadows

.shadow-1
.shadow
.shadow-2
.shadow-3
.shadow-4
.shadow-5
<div class="shadow">...</div>

Inset shadows

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

Remove shadows

.shadow-none
<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
    )
);
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->