Drop Shadow Effects
The following table visually represents all drop shadow effects that are available.
Semantic Effects
The following table visually represents all input states and other semantic effects that are available.
Basic Usage
Apply box shadow effect with the shadow-<size> utility.
<div class="shadow-lg ...">
...
</div>CSS Variables
Customize radiuses by overriding the following CSS custom properties.
:root {
--shadow-2xs: 0 1px 2px rgba(134, 144, 162, 0.1);
--shadow-xs: 0 2px 4px rgba(134, 144, 162, 0.15);
--shadow-sm: 0 3px 6px rgba(134, 144, 162, 0.2);
--shadow-md: 0 4px 8px rgba(134, 144, 162, 0.25);
--shadow-lg: 0 6px 12px rgba(134, 144, 162, 0.3);
--shadow-xl: 0 12px 24px rgba(134, 144, 162, 0.35);
--shadow-2xl: 0 24px 48px rgba(134, 144, 162, 0.4);
--shadow-focus: 0 0 0 4px rgba(0, 84, 203, 0.2);
--shadow-success: 0 0 0 4px rgba(18, 181, 57, 0.2);
--shadow-warning: 0 0 0 4px rgba(210, 127, 0, 0.2);
--shadow-danger: 0 0 0 4px rgba(203, 18, 0, 0.2);
--shadow-info: 0 0 0 4px rgba(0, 200, 177, 0.2);
}