#Box Shadow

New

0.7.0

Utility classes to apply a box shadow around any element.

Class	Styles
`u-shadow-none`	`--cirrus-shadow: 0 0 #000;`
`u-shadow-xs`	`--cirrus-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);`
`u-shadow-sm`	`--cirrus-shadow: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06));`
`u-shadow-md`	`--cirrus-shadow: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));`
`u-shadow-lg`	`--cirrus-shadow: (0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));`
`u-shadow-xl`	`--cirrus-shadow: (0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));`
`u-shadow-inset`	`--cirrus-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);`

Supported Pseudo-Variants

New

0.8.0

active

checked

dark

disabled

first-of-type

focus

focus-visible

focus-within

group-focus

group-hover

hover

landscape

last-of-type

light

portrait

reduce-motion

responsive

visited

See more pseudo-variants.

#Outer Shadow

Easily add a box shadow to any element using the box shadow utility classes to add extra depth. The utility classes for outer shadows generally follow this form: u-shadow-[xs|sm|md|lg|xl].

<div class="bg-gray-000 u-round-xs row u-gap-2 p-4 u-justify-center">
    <div class="bg-gray-200 u-round-xs p-4 u-shadow-none u-text-center"><span class="font-bold">none</span></div>
    <div class="bg-gray-200 u-round-xs p-4 u-shadow-xs u-text-center"><span class="font-bold">xs</span></div>
    <div class="bg-gray-200 u-round-xs p-4 u-shadow-sm u-text-center"><span class="font-bold">sm</span></div>
    <div class="bg-gray-200 u-round-xs p-4 u-shadow-md u-text-center"><span class="font-bold">md</span></div>
    <div class="bg-gray-200 u-round-xs p-4 u-shadow-lg u-text-center"><span class="font-bold">lg</span></div>
    <div class="bg-gray-200 u-round-xs p-4 u-shadow-xl u-text-center"><span class="font-bold">xl</span></div>
</div>

#Inner Shadow

To add an inner shadow, you can use the u-shadow-inset class.

inset

<div class="bg-gray-000 u-round-xs row u-gap-2 p-4 u-justify-center">
    <div class="bg-gray-200 u-round-xs p-4 u-shadow-inset u-text-center"><span class="font-bold">inset</span></div>
</div>

#No Shadow

To remove all shadows, use the u-shadow-none class.

none

<div class="bg-gray-000 u-round-xs row u-gap-2 p-4 u-justify-center">
    <div class="bg-gray-200 u-round-xs p-4 u-shadow-none u-text-center"><span class="font-bold">none</span></div>
</div>

#Variants

The classes specified above are the default utility classes for setting box shadows. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        shadows: (
            '2xl': (
                --cirrus-shadow: (0 25px 30px -10px rgba(0, 0, 0, 0.1),
                0 15px 15px -10px rgba(0, 0, 0, 0.04))
            )
        )
    )
) !default;

This would generate the following additonal classes.

.u-shadow-2xl {
    --cirrus-shadow: (0 25px 30px -10px rgba(0, 0, 0, 0.1),
    0 15px 15px -10px rgba(0, 0, 0, 0.04))
    box-shadow: var(--cirrus-shadow);
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.

Cirrus