Cirrus

#Box Shadow

New
0.7.0

Utility classes to apply a box shadow around any element.

ClassStyles
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);

#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].

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.