Skip to main content

​
Overview

Blur utilities are now bundled and mapped through the current framework source. They are most useful for decorative media, background plates, and softened support layers.
ClassFilter (CSS)Usage
.filter-nonefilter: none;Reset inherited blur or other filters
.blur-smfilter: blur(4px);Light softening
.blurfilter: blur(8px);Default decorative blur
.blur-mdfilter: blur(12px);Medium background plates
.blur-lgfilter: blur(16px);Strong blur for depth
.blur-xlfilter: blur(24px);Heavy blur for hero or frosted effects

​
Example

​
Markup

<img alt="Softened background media" class="blur-md rounded-xl" src="hero.jpg"/>

​
Best Practices

  • Use blur on decorative media, not on body text.
  • Start with blur-sm or blur before moving into the heavier levels.
  • Pair blur with opacity and overlays for more controlled hero treatments.
  • Use filter-none to intentionally reset inherited filter chains.

Brightness

Pair blur with brightness adjustments on media

Saturate

Add or remove intensity after softening imagery