Filters - Domma Showcase

Blur Filters

Apply blur effects with varying intensities

No Blur

Blur SM

Blur

Blur LG

Blur XL

<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 50%

Brightness 100%

Brightness 150%

Contrast 50%

Contrast 150%

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

Grayscale & Sepia

Remove colour or add vintage sepia tone

Original

Grayscale 50%

Grayscale 100%

Sepia 50%

Sepia 100%

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

Saturate & Hue Rotate

Adjust colour saturation and rotate hues

Saturate 0%

Saturate 100%

Saturate 200%

Hue Rotate 90°

Hue Rotate 180°

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

Invert

Invert colours for negative effect

Original

Invert 50%

Invert 100%

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

Drop Shadow

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

Drop Shadow SM

Drop Shadow

Drop Shadow MD

Drop Shadow LG

Drop Shadow XL

<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 SM

Backdrop Blur

Backdrop Blur LG

Backdrop Blur XL

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

Combined Filter Presets

Pre-configured combinations of multiple filters

Original

Vintage

Dramatic

Soft

Cold

Warm

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

Usage Examples

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>

Creating Custom Filters

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;
}

Performance & Browser 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