Filters

CSS filter effects for images, elements, and backdrop blur effects

blur

Apply blur effects with varying intensities

blur

No Blur

Blur SM

Blur

Blur LG

Blur XL

<div>
    <div class="image-demo blur-none"></div>
    <p class="text-center mt-2">No Blur</p>
</div>
<div>
    <div class="image-demo blur-sm"></div>
    <p class="text-center mt-2">Blur SM</p>
</div>
<div>
    <div class="image-demo blur"></div>
    <p class="text-center mt-2">Blur</p>
</div>
<div>
    <div class="image-demo blur-lg"></div>
    <p class="text-center mt-2">Blur LG</p>
</div>
<div>
    <div class="image-demo blur-xl"></div>
    <p class="text-center mt-2">Blur XL</p>
</div>

<img src="image.jpg" class="blur-sm">
<img src="image.jpg" class="blur">
<img src="image.jpg" class="blur-lg">
<img src="image.jpg" class="blur-xl">

brightness-contrast

Adjust brightness and contrast levels

brightness-contrast

Brightness 50%

Brightness 100%

Brightness 150%

Contrast 50%

Contrast 150%

<div>
    <div class="image-demo brightness-50"></div>
    <p class="text-center mt-2">Brightness 50%</p>
</div>
<div>
    <div class="image-demo brightness-100"></div>
    <p class="text-center mt-2">Brightness 100%</p>
</div>
<div>
    <div class="image-demo brightness-150"></div>
    <p class="text-center mt-2">Brightness 150%</p>
</div>
<div>
    <div class="image-demo contrast-50"></div>
    <p class="text-center mt-2">Contrast 50%</p>
</div>
<div>
    <div class="image-demo contrast-150"></div>
    <p class="text-center mt-2">Contrast 150%</p>
</div>

<img src="image.jpg" class="brightness-150">
<img src="image.jpg" class="contrast-125">

grayscale-sepia

Remove colour or add vintage sepia tone

grayscale-sepia

Original

Grayscale 50%

Grayscale 100%

Sepia 50%

Sepia 100%

<div>
    <div class="image-demo"></div>
    <p class="text-center mt-2">Original</p>
</div>
<div>
    <div class="image-demo grayscale-50"></div>
    <p class="text-center mt-2">Grayscale 50%</p>
</div>
<div>
    <div class="image-demo grayscale"></div>
    <p class="text-center mt-2">Grayscale 100%</p>
</div>
<div>
    <div class="image-demo sepia-50"></div>
    <p class="text-center mt-2">Sepia 50%</p>
</div>
<div>
    <div class="image-demo sepia"></div>
    <p class="text-center mt-2">Sepia 100%</p>
</div>

<img src="image.jpg" class="grayscale">
<img src="image.jpg" class="sepia">

saturate-hue

Adjust colour saturation and rotate hues

saturate-hue

Saturate 0%

Saturate 100%

Saturate 200%

Hue Rotate 90°

Hue Rotate 180°

<div>
    <div class="image-demo saturate-0"></div>
    <p class="text-center mt-2">Saturate 0%</p>
</div>
<div>
    <div class="image-demo saturate-100"></div>
    <p class="text-center mt-2">Saturate 100%</p>
</div>
<div>
    <div class="image-demo saturate-200"></div>
    <p class="text-center mt-2">Saturate 200%</p>
</div>
<div>
    <div class="image-demo hue-rotate-90"></div>
    <p class="text-center mt-2">Hue Rotate 90°</p>
</div>
<div>
    <div class="image-demo hue-rotate-180"></div>
    <p class="text-center mt-2">Hue Rotate 180°</p>
</div>

<img src="image.jpg" class="saturate-150">
<img src="image.jpg" class="hue-rotate-90">

invert

Invert colours for negative effect

invert

Original

Invert 50%

Invert 100%

<div>
    <div class="image-demo"></div>
    <p class="text-center mt-2">Original</p>
</div>
<div>
    <div class="image-demo invert-50"></div>
    <p class="text-center mt-2">Invert 50%</p>
</div>
<div>
    <div class="image-demo invert"></div>
    <p class="text-center mt-2">Invert 100%</p>
</div>

<img src="image.jpg" class="invert">

drop-shadow

Add shadows to non-rectangular elements (unlike box-shadow)

drop-shadow

Drop Shadow SM

Drop Shadow

Drop Shadow MD

Drop Shadow LG

Drop Shadow XL

<div class="filter-demo drop-shadow-sm">Drop Shadow SM</div>
<div class="filter-demo drop-shadow">Drop Shadow</div>
<div class="filter-demo drop-shadow-md">Drop Shadow MD</div>
<div class="filter-demo drop-shadow-lg">Drop Shadow LG</div>
<div class="filter-demo drop-shadow-xl">Drop Shadow XL</div>

<img src="icon.svg" class="drop-shadow-lg">
<div class="drop-shadow-xl">Elevated Element</div>

backdrop-blur

Blur the background behind an element (glassmorphism effect)

backdrop-blur

Backdrop Blur SM

Backdrop Blur

Backdrop Blur LG

Backdrop Blur XL

<div class="backdrop-demo">
    <div class="backdrop-overlay backdrop-blur-sm">Backdrop Blur SM</div>
</div>
<div class="backdrop-demo">
    <div class="backdrop-overlay backdrop-blur">Backdrop Blur</div>
</div>
<div class="backdrop-demo">
    <div class="backdrop-overlay backdrop-blur-lg">Backdrop Blur LG</div>
</div>
<div class="backdrop-demo">
    <div class="backdrop-overlay backdrop-blur-xl">Backdrop Blur XL</div>
</div>

<div class="backdrop-blur">
    <!-- Content with blurred background -->
</div>

<!-- Glassmorphism Card -->
<div class="card backdrop-blur-lg" style="background: rgba(255,255,255,0.1);">
    <div class="card-body">
        Semi-transparent with blurred backdrop
    </div>
</div>

presets

Pre-configured combinations of multiple filters

presets

Original

Vintage

Dramatic

Soft

Cold

Warm

<div>
    <div class="image-demo"></div>
    <p class="text-center mt-2">Original</p>
</div>
<div>
    <div class="image-demo filter-vintage"></div>
    <p class="text-center mt-2">Vintage</p>
</div>
<div>
    <div class="image-demo filter-dramatic"></div>
    <p class="text-center mt-2">Dramatic</p>
</div>
<div>
    <div class="image-demo filter-soft"></div>
    <p class="text-center mt-2">Soft</p>
</div>
<div>
    <div class="image-demo filter-cold"></div>
    <p class="text-center mt-2">Cold</p>
</div>
<div>
    <div class="image-demo filter-warm"></div>
    <p class="text-center mt-2">Warm</p>
</div>

<img src="photo.jpg" class="filter-vintage">
<img src="photo.jpg" class="filter-dramatic">
<img src="photo.jpg" class="filter-soft">

usage

Practical applications of CSS filters

<!-- Inactive/Disabled State -->
<img src="icon.svg" class="grayscale opacity-50">

<!-- Glassmorphism Card -->
<div class="card backdrop-blur-lg bg-white-t10">
    <div class="card-body">Frosted Glass Effect</div>
</div>

<!-- Image Gallery with Hover Effect -->
<img src="photo.jpg" class="grayscale hover:grayscale-0">

<!-- Loading State -->
<div class="blur-sm animate-pulse">Loading...</div>

<!-- Dramatic Hero Image -->
<section class="hero filter-dramatic brightness-90">
    <h1>Bold Statement</h1>
</section>

custom

Combine multiple filter functions for unique effects

/* Custom Filter Combination */
.my-custom-filter {
    filter: brightness(1.1) contrast(1.2) saturate(1.3);
}

/* Dynamic Filter with CSS Variable */
.interactive-filter {
    filter: blur(var(--blur-amount, 0px));
    transition: filter 0.3s ease;
}

.interactive-filter:hover {
    --blur-amount: 8px;
}

support

Browser Support

filter - All modern browsers
backdrop-filter - All modern browsers (requires -webkit- prefix in some)
Fallback - Filters gracefully degrade if not supported

Performance Tips

Use sparingly - Filters can be computationally expensive
Avoid animations - Don't animate filter values excessively
will-change - Add will-change: filter for frequently filtered elements
Test performance - Always test on lower-end devices
backdrop-filter - Particularly expensive; use only when necessary