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