New

Stable version of Uniform CSS now officially released! Release note

Blurs

Visual reference of all default blurs.


Visual Reference

The following table visually represents all the blurs that are available.

Reference Class Blur
blur-2xs 4px
blur-xs 8px
blur-sm 12px
blur-md 16px
blur-lg 24px
blur-xl 32px
blur-2xl 48px

Basic Usage

Blurs only apply to blur related properties such as filter and backdrop-filter. Apply to blurs using <property>-blur-<level>.

<div class="filter filter-blur-xl">
...
</div>

CSS Variables

Customize blur levels by overriding the following CSS custom properties.

:root {
--blur-2xs: 4px;
--blur-xs: 8px;
--blur-sm: 12px;
--blur-md: 16px;
--blur-lg: 24px;
--blur-xl: 32px;
--blur-2xl: 48px;
}