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