New

Stable version of Uniform CSS now officially released! Release note

Box Shadows

Visual reference of all default box-shadows.


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