Skip to main content
AtomicKit’s filter utilities let you apply CSS visual effects directly to images, background layers, and decorative elements in Elementor — without writing a single line of custom CSS. From softening a blurred hero background to desaturating an inactive element, all filter adjustments are handled by a class that maps to a single filter property value.

Blur

Soften images and decorative layers with five blur steps from blur-sm to blur-xl, plus filter-none to reset.

Brightness

Lighten or darken a layer using five steps from brightness-75 to brightness-125.

Contrast

Increase or reduce color contrast on media with steps from contrast-75 to contrast-125.

Saturate

Control color intensity from saturate-0 (fully desaturated) to saturate-200 (doubly vivid).

Hue Rotate

Shift the hue of all colors on an element across the color wheel in increments from 15° to 180°.

Color Effects

Apply grayscale, invert, sepia, and partial variants for editorial and state-driven treatments.

​
Shipped Filter Families

AtomicKit includes the following filter classes:
  • Blur — filter-none, blur-sm, blur, blur-md, blur-lg, blur-xl
  • Brightness — brightness-75, brightness-90, brightness-100, brightness-110, brightness-125
  • Contrast — contrast-75, contrast-90, contrast-100, contrast-110, contrast-125
  • Saturate — saturate-0, saturate-50, saturate-100, saturate-150, saturate-200
  • Hue Rotate — hue-rotate-15, hue-rotate-30, hue-rotate-60, hue-rotate-90, hue-rotate-180
  • Color Effects — grayscale, grayscale-50, invert, invert-50, sepia, sepia-50, filter-none

​
Common Use Cases

Decorative media backgrounds — apply blur-lg or blur-xl to a full-bleed background image to keep it visually rich without competing with foreground text. Hero backgrounds behind text — combine brightness-75 or brightness-90 to darken a photo just enough to make white text legible without a separate overlay layer. Inactive and muted states — use grayscale on an image, icon, or card to signal that it’s unavailable, completed, or de-prioritized. Editorial tone and mood — sepia warms a photo for vintage or lifestyle aesthetics; contrast-110 or contrast-125 punches up an image for a graphic, bold look.

​
Filter Combinations

AtomicKit applies one filter property per element. For multi-effect combinations — for example blurring and dimming the same layer — the recommended approach is to use a wrapper element:
Pair blur with opacity utilities for soft, layered overlays. Apply blur-md to a decorative background layer, then use opacity-80 on the layer above to blend the two surfaces together smoothly.

​
Blur

Soften images and decorative elements to move them visually into the background.

​
Brightness

Lighten or darken a layer. Values below 100 darken; values above 100 lighten.

​
Contrast

Increase sharpness between light and dark areas, or flatten an image for a softer effect.

​
Saturate

Control the vibrancy of colors on an element. Use saturate-0 to strip all color and produce a grayscale effect with full CSS filter flexibility.

​
Hue Rotate

Shift all colors on an element around the color wheel. Useful for generating color variants from a single image, or for animated states.

​
Color Effects

Apply full or partial tonal treatments to images and media layers.

​
Best Practices

  • Apply blur to decorative media, not body text. Blurred text is unreadable. Reserve blur for background images, decorative shapes, and layers that sit behind foreground content.
  • Use brightness to prepare background media for text. brightness-75 or brightness-90 on a photo is often more elegant than a separate overlay div — it reduces the image to a readable contrast level with fewer DOM elements.
  • Use filter-none to reset inherited filter chains. When a child element inside a filtered parent needs to appear unaffected, apply filter-none directly to that child to cancel out the inherited value.
  • Use grayscale for muted and inactive states. Desaturating an image, icon, or card thumbnail is a clear, accessible way to signal that something is unavailable or disabled — paired with reduced opacity, it reads unmistakably as inactive.
  • Keep filter use intentional. Stacking many filter values or applying filters to large portions of a page layout can be visually noisy and computationally expensive on lower-end devices.

​
Related Utilities

  • Opacity — Combine with filters to control transparency alongside visual effects.
  • Box Shadow — Add elevation and depth to the same elements you’re filtering.