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: 
<div class="blur-lg">
  <!-- Outer wrapper handles the blur -->
  <div class="brightness-75">
    <!-- Inner element handles the brightness reduction -->
  </div>
</div>
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.
ClassCSS Property
.filter-nonefilter: none
.blur-smfilter: blur(4px)
.blurfilter: blur(8px)
.blur-mdfilter: blur(12px)
.blur-lgfilter: blur(16px)
.blur-xlfilter: blur(24px)
<div class="blur-lg">
  <!-- Background image element softened into the page -->
</div>

​
Brightness

Lighten or darken a layer. Values below 100 darken; values above 100 lighten.
ClassCSS Property
.brightness-75filter: brightness(0.75)
.brightness-90filter: brightness(0.9)
.brightness-100filter: brightness(1)
.brightness-110filter: brightness(1.1)
.brightness-125filter: brightness(1.25)

​
Contrast

Increase sharpness between light and dark areas, or flatten an image for a softer effect.
ClassCSS Property
.contrast-75filter: contrast(0.75)
.contrast-90filter: contrast(0.9)
.contrast-100filter: contrast(1)
.contrast-110filter: contrast(1.1)
.contrast-125filter: contrast(1.25)

​
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.
ClassCSS Property
.saturate-0filter: saturate(0)
.saturate-50filter: saturate(0.5)
.saturate-100filter: saturate(1)
.saturate-150filter: saturate(1.5)
.saturate-200filter: saturate(2)

​
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.
ClassCSS Property
.hue-rotate-15filter: hue-rotate(15deg)
.hue-rotate-30filter: hue-rotate(30deg)
.hue-rotate-60filter: hue-rotate(60deg)
.hue-rotate-90filter: hue-rotate(90deg)
.hue-rotate-180filter: hue-rotate(180deg)

​
Color Effects

Apply full or partial tonal treatments to images and media layers.
ClassCSS PropertyEffect
.grayscalefilter: grayscale(1)Fully desaturated — removes all color
.grayscale-50filter: grayscale(0.5)Partial desaturation — muted, faded look
.invertfilter: invert(1)Full color inversion — negative image effect
.invert-50filter: invert(0.5)Partial inversion — washed-out or ghosted look
.sepiafilter: sepia(1)Full sepia tone — warm vintage brown tint
.sepia-50filter: sepia(0.5)Partial sepia — subtle warmth without full tinting
.filter-nonefilter: noneRemoves all active filter effects
<div class="grayscale">
  <!-- Image shown in full grayscale — useful for inactive or unavailable states -->
</div>

<div class="sepia">
  <!-- Image with warm vintage toning -->
</div>

​
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.