Filters

Apply visual effects like blur, brightness shifts, and color adjustments to elements.

Blur

The blur-* utility applies a Gaussian blur to an element. It supports spacing values, pixel units, and rems.

blur-px

blur-8px

blur-4


<div class="blur-px"><!-- 1px blur --></div>
<div class="blur-8px"><!-- 8px blur --></div>
<div class="blur-4"><!-- 1rem blur --></div>

Color Adjustments

Fine-tune the appearance of images and elements with brightness, contrast, and saturation controls. These utilities take decimal values where 1 is the original state.

brightness-1.5

contrast-1.5

saturate-2


<div class="brightness-1.5"><!-- 150% brightness --></div>
<div class="contrast-1.5"><!-- 150% contrast --></div>
<div class="saturate-2"><!-- 200% saturation --></div>

Hue Rotate

Rotate the hue of an element by a specific degree. Supports both positive and negative values for full color spectrum shifts.

-hue-45

hue-45

hue-90


<div class="-hue-45"><!-- Rotate hue -45 degrees --></div>
<div class="hue-45"><!-- Rotate hue 45 degrees --></div>
<div class="hue-90"><!-- Rotate hue 90 degrees --></div>

Grayscale, Sepia, and Invert

Quickly apply stylistic filters for monochromatic, vintage, or inverted looks.

grayscale-1

sepia-1

invert-1


<div class="grayscale-1"><!-- 100% grayscale --></div>
<div class="sepia-1"><!-- 100% sepia --></div>
<div class="invert-1"><!-- 100% invert --></div>

Drop Shadow

Apply a hardware-accelerated drop shadow to an element's actual shape (including transparent images and SVGs). Supports presets, custom values, and stacked shadows.

preset

inline

stacked


<!-- Preset shadow -->
<div class="--shadow-xl=0_32px_64px_red">  
  <div class="dshadow-xl">preset</div>
</div>

<!-- Inline shadow -->
<div class="dshadow-0_32px_64px_green">inline</div>

<!--Stacked shadow -->
<div class="--shadow-sm=0_2px_4px_blue --shadow-xl=0_32px_64px_blue">
  <div class="dshadow-sm,xl">stacked</div>
</div>

Advanced Shadows

For more details about all shadow types, including box and text shadows, check out the Shadows Guide.

Backdrop Filters

Backdrop filters apply effects to the area behind an element, enabling modern glassmorphism effects. Simply add the bd prefix to any standard filter utility.

Glass 1

Glass 2


<!-- Standard glass effect -->
<div class="bdblur-4 bgc-white/20 br brc-white/30">Glass 1</div>

<!-- Combined backdrop filters -->
<div class="bdblur-4 bdsaturate-1.5 bdbrightness-0.8 bgc-white/20 br brc-white/30">
  Glass 2
</div>

Refer to the underlying CSS properties for granular filter control.

filter

backdrop-filter