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

Opacity

Use opacity for layered visual treatments

Layout

Frame visual layers cleanly