Styleframe Logo
Utilities

Filters

Create filter utilities for blur, brightness, contrast, grayscale, and backdrop effects with full type safety.

Overview

Filter utilities help you apply CSS filter effects to elements including blur, brightness, contrast, grayscale, hue rotation, and more. These utilities also include backdrop filter variants for applying effects to the area behind an element.

Why Use Filter Utilities?

Filter utilities help you:

  • Create visual effects: Apply blur, brightness, and contrast adjustments
  • Build frosted glass effects: Use backdrop filters for modern UI patterns
  • Combine multiple filters: CSS custom properties allow stacking filter effects
  • Support accessibility: Adjust contrast and color for better readability

useBlurUtility

The useBlurUtility() function creates utility classes for applying blur effects.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBlurUtility } from "@styleframe/theme";

const s = styleframe();

useBlurUtility(s, {
    none: '0',
    sm: '4px',
    default: '8px',
    md: '12px',
    lg: '16px',
    xl: '24px',
    '2xl': '40px',
    '3xl': '64px',
});

export default s;
Pro tip: Filter utilities use CSS custom properties, allowing you to combine multiple filters on the same element without conflicts.

useBrightnessUtility

The useBrightnessUtility() function creates utility classes for adjusting element brightness.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBrightnessUtility } from "@styleframe/theme";

const s = styleframe();

useBrightnessUtility(s, {
    '0': '0',
    '50': '.5',
    '75': '.75',
    '90': '.9',
    '95': '.95',
    '100': '1',
    '105': '1.05',
    '110': '1.1',
    '125': '1.25',
    '150': '1.5',
    '200': '2',
});

export default s;

useContrastUtility

The useContrastUtility() function creates utility classes for adjusting element contrast.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useContrastUtility } from "@styleframe/theme";

const s = styleframe();

useContrastUtility(s, {
    '0': '0',
    '50': '.5',
    '75': '.75',
    '100': '1',
    '125': '1.25',
    '150': '1.5',
    '200': '2',
});

export default s;

useGrayscaleUtility

The useGrayscaleUtility() function creates utility classes for applying grayscale effects.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useGrayscaleUtility } from "@styleframe/theme";

const s = styleframe();

useGrayscaleUtility(s, {
    '0': '0',
    default: '100%',
});

export default s;

More Filter Utilities

useHueRotateUtility

Rotates the hue of an element's colors.

useHueRotateUtility(s, {
    '0': '0deg',
    '15': '15deg',
    '30': '30deg',
    '60': '60deg',
    '90': '90deg',
    '180': '180deg',
});

useInvertUtility

Inverts the colors of an element.

useInvertUtility(s, {
    '0': '0',
    default: '100%',
});

useSaturateUtility

Adjusts the saturation of an element's colors.

useSaturateUtility(s, {
    '0': '0',
    '50': '.5',
    '100': '1',
    '150': '1.5',
    '200': '2',
});

useSepiaUtility

Applies a sepia tone effect.

useSepiaUtility(s, {
    '0': '0',
    default: '100%',
});

useDropShadowUtility

Applies a drop shadow effect (useful for non-rectangular elements like SVGs).

useDropShadowUtility(s, {
    sm: '0 1px 1px rgb(0 0 0 / 0.05)',
    default: '0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06)',
    md: '0 4px 3px rgb(0 0 0 / 0.07), 0 2px 2px rgb(0 0 0 / 0.06)',
    lg: '0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1)',
    xl: '0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08)',
    '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
    none: '0 0 #0000',
});

Backdrop Filter Utilities

Backdrop filter utilities apply filter effects to the area behind an element.

useBackdropBlurUtility

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBackdropBlurUtility } from "@styleframe/theme";

const s = styleframe();

useBackdropBlurUtility(s, {
    none: '0',
    sm: '4px',
    default: '8px',
    md: '12px',
    lg: '16px',
    xl: '24px',
    '2xl': '40px',
    '3xl': '64px',
});

export default s;

Other Backdrop Utilities

  • useBackdropBrightnessUtility() - Adjust backdrop brightness
  • useBackdropContrastUtility() - Adjust backdrop contrast
  • useBackdropGrayscaleUtility() - Apply backdrop grayscale
  • useBackdropHueRotateUtility() - Rotate backdrop hue
  • useBackdropInvertUtility() - Invert backdrop colors
  • useBackdropOpacityUtility() - Adjust backdrop opacity
  • useBackdropSaturateUtility() - Adjust backdrop saturation
  • useBackdropSepiaUtility() - Apply backdrop sepia

Examples

Frosted Glass Card

styleframe.config.ts
import { styleframe } from "styleframe";
import { useBackdropBlurUtility } from "@styleframe/theme";
import { useBackgroundColorUtility } from "@styleframe/theme";

const s = styleframe();
const { selector } = s;

useBackdropBlurUtility(s, {
    md: '12px',
    lg: '16px',
});

useBackgroundColorUtility(s, {
    'white/50': 'rgb(255 255 255 / 0.5)',
    'white/80': 'rgb(255 255 255 / 0.8)',
});

// Create a frosted glass card style
selector('.glass-card', {
    backdropFilter: 'blur(16px)',
    backgroundColor: 'rgb(255 255 255 / 0.7)',
    borderRadius: '0.5rem',
    border: '1px solid rgb(255 255 255 / 0.3)',
});

export default s;

Disabled State with Grayscale

styleframe.config.ts
import { styleframe } from "styleframe";
import { useGrayscaleUtility, useOpacityUtility } from "@styleframe/theme";

const s = styleframe();
const { modifier } = s;

// Create disabled modifier
const disabled = modifier('disabled', ({ declarations }) => ({
    '&:disabled': declarations,
}));

useGrayscaleUtility(s, {
    default: '100%',
});

useOpacityUtility(s, {
    '50': '0.5',
});

// Apply grayscale on disabled
useGrayscaleUtility(s, { default: '100%' }, [disabled]);

export default s;

Best Practices

  • Use backdrop-filter for glass effects: Combine backdrop blur with semi-transparent backgrounds
  • Consider performance: Filter effects can be expensive; avoid animating complex filters
  • Test browser support: Backdrop filters may not work in all browsers; provide fallbacks
  • Combine thoughtfully: Multiple filters can compound effects; test combinations carefully
  • Use drop-shadow for SVGs: Drop shadows work on the actual shape, unlike box-shadow
  • Respect user preferences: Consider reducing motion and effects for users who prefer reduced motion

FAQ

Effects

Create effect utilities for shadows, opacity, and blend modes with full type safety.

Flexbox & Grid

Create flexbox and grid layout utilities for building responsive layouts with full type safety.