Filters

Filter utilities create visual depth, image treatments, frosted surfaces, glass panels, and subtle interface emphasis. Use them for glassmorphism panels, media previews, archived content, hover states, and contrast control without writing custom CSS.

All filter utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Classes	Effect	Common use
Backdrop blur	`backdrop-blur-tiny`, `backdrop-blur-small`, `backdrop-blur`, `backdrop-blur-medium`, `backdrop-blur-large`, `backdrop-blur-xlarge`, `backdrop-blur-none`	`backdrop-filter: blur(...);`	Glass cards, sticky navigation, overlays.
Glass	`is-glass`	`background, backdrop blur, border, shadow`	Ready-made frosted cards, headers, panels, and overlays.
Blur	`blur-tiny`, `blur-small`, `blur`, `blur-medium`, `blur-large`, `blur-xlarge`, `blur-none`	`filter: blur(...);`	Image previews, loading placeholders, soft focus.
Grayscale	`grayscale`, `grayscale-small`, `grayscale-none`	`filter: grayscale(...);`	Inactive logos, archived items, muted media.
Brightness	`brightness-75`, `brightness-90`, `brightness-110`, `brightness-125`	`filter: brightness(...);`	Hero overlays, hover emphasis, image contrast.

Usage

Use backdrop-blur with a translucent surface or background utility to create a frosted panel.

<div class="backdrop-blur bg-white rounded-3">
  Glass card content
</div>

Glass utility

Use is-glass when you want a complete glassmorphism surface without manually combining background, blur, border, and shadow utilities. It uses the global glass tokens, so the same class can stay consistent across light mode, dark mode, cards, sticky headers, and overlays.

/* Glass */
.is-glass {
    background-color: var(--glass);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

<div class="is-glass rounded-4 p-4">
  Premium glass panel
</div>

Glass card

Backdrop blur affects the content behind an element. It works best when the element has transparency, border, radius, and a surface token.

<div class="backdrop-blur-medium bg-surface-raised rounded-4 border">
  Premium glass panel
</div>

Loading preview

Blur affects the element itself. Use it for previews, skeleton media states, or intentionally softened imagery.

<img class="blur-medium" src="/image.jpg" alt="Preview" />

Disabled media state

Use grayscale for inactive, archived, disabled, or secondary visual content.

<img class="grayscale-small" src="/logo.png" alt="Logo" />

Hero overlay

Brightness utilities are useful when text or UI elements sit above an image and need stronger contrast.

<img class="brightness-75" src="/hero.jpg" alt="Hero" />

Backdrop blur scale

Class	Blur	Recommended use
`backdrop-blur-tiny`	`2px`	Very subtle frosted surfaces.
`backdrop-blur-small`	`4px`	Compact panels and small overlays.
`backdrop-blur`	`8px`	Default glass cards and navigation bars.
`backdrop-blur-medium`	`12px`	Premium cards, modals, and soft overlays.
`backdrop-blur-large`	`16px`	Strong glassmorphism sections.
`backdrop-blur-xlarge`	`24px`	Heavy overlay separation.
`backdrop-blur-none`	`none`	Remove backdrop blur at a breakpoint or state.

Blur scale

Class	Blur	Recommended use
`blur-tiny`	`2px`	Slight softening.
`blur-small`	`4px`	Soft media previews.
`blur`	`8px`	Default blurred elements.
`blur-medium`	`12px`	Loading previews and protected media.
`blur-large`	`16px`	Heavy soft-focus treatments.
`blur-xlarge`	`24px`	Strong obscuring or abstract backgrounds.
`blur-none`	`none`	Remove blur at a breakpoint or state.

Grayscale scale

Class	Effect	Recommended use
`grayscale`	`100%`	Archived content, disabled media, inactive brand marks.
`grayscale-small`	`50%`	Subtle muted treatment without fully removing color.
`grayscale-none`	`0%`	Restore original color at a breakpoint or state.

Brightness scale

Class	Value	Recommended use
`brightness-75`	`0.75`	Darken hero images or background media.
`brightness-90`	`0.90`	Slightly reduce visual intensity.
`brightness-110`	`1.10`	Lift images on hover or focus.
`brightness-125`	`1.25`	Create a stronger highlighted media state.

Real-world examples

Frosted navigation

<header class="is-glass">
  Navigation
</header>

Featured image hover

<img class="hover:brightness-110" src="/cover.jpg" alt="Cover" />

Archived content

<div class="grayscale">
  Archived project
</div>

Choosing the right filter

Use case	Recommended utility
Glassmorphism surface	`is-glass`, `backdrop-blur`, or `backdrop-blur-medium`
Soft loading preview	`blur-small` or `blur-medium`
Inactive or archived media	`grayscale` or `grayscale-small`
Darker hero image	`brightness-75`
Image hover emphasis	`hover:brightness-110`

Accessibility notes

Filter utilities are visual enhancements. They should not be the only way to communicate disabled, loading, hidden, or inactive states.

For disabled content, pair grayscale with semantic attributes or clear text so the state is available beyond color and visual treatment.

<button disabled class="grayscale opacity-50 cursor-not-allowed">
  Disabled
</button>

For text-heavy surfaces, avoid heavy blur behind text. Strong backdrop blur can reduce readability when the background is complex.

<div class="backdrop-blur-small bg-surface-raised border rounded-4">
  Readable frosted content
</div>

Usage notes

Use is-glass for ready-made glass panels, headers, cards, and overlays.
Use backdrop blur for custom glassmorphism interfaces and translucent overlays.
Prefer moderate blur values for readable UI surfaces.
Use regular blur on the element itself, not on the background behind it.
Use grayscale for inactive, archived, or disabled-looking content.
Use brightness utilities to improve image contrast or create hover emphasis.
Combine filters with borders, shadows, radius, and surface tokens for premium UI design.
Avoid heavy blur behind long text blocks because it can reduce readability.