Difficulty: Advanced
CSS filters and blend modes provide Photoshop-like visual effects directly in the browser, eliminating the need for image editing software to create blurred backgrounds, color overlays, grayscale effects, and sophisticated visual compositions. These properties are GPU-accelerated and can be animated, making them powerful tools for creating polished, dynamic interfaces.
The filter property applies graphical effects to an element and all its children. Available filter functions include blur() for Gaussian blur, brightness() for lightening or darkening, contrast() for adjusting contrast, grayscale() for desaturation, saturate() for color intensity, hue-rotate() for shifting colors, invert() for color inversion, sepia() for a warm vintage tone, opacity() for transparency (similar to the opacity property but can be combined in a filter chain), and drop-shadow() for shadows that follow the element's alpha channel (unlike box-shadow which follows the box). Multiple filters can be chained in a single declaration and are applied in order.
The backdrop-filter property applies the same filter effects, but to the area behind the element rather than the element itself. This is the foundation of the frosted glass (glassmorphism) effect that became popular in modern UI design. By setting a semi-transparent background on an element and applying backdrop-filter: blur(), the content behind the element appears blurred while the element itself remains crisp. This is commonly used for navigation bars, modal overlays, and notification panels.
The mix-blend-mode property controls how an element's colors blend with the colors of its parent and siblings - like Photoshop layer blend modes. Common modes include multiply (darkens by multiplying colors), screen (lightens by screening colors), overlay (combines multiply and screen), darken (keeps the darker of the two colors), lighten (keeps the lighter), color-dodge (brightens the base), difference (subtracts colors), and luminosity (uses the luminosity of the element with the hue and saturation of the background).
The background-blend-mode property works specifically on an element's background layers - blending a background-image with a background-color or blending multiple background images with each other. This is useful for creating duotone effects (a colored overlay on an image), tinting images, and combining patterns. Unlike mix-blend-mode which affects how the element blends with its surroundings, background-blend-mode is self-contained within the element's own backgrounds.
/* Individual filter functions */
.blur { filter: blur(4px); }
.bright { filter: brightness(1.3); }
.contrast { filter: contrast(1.5); }
.grayscale { filter: grayscale(100%); }
.saturate { filter: saturate(2); }
.hue-rotate { filter: hue-rotate(90deg); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(80%); }
/* Chaining multiple filters */
.vintage {
filter: sepia(60%) contrast(1.1) brightness(0.9) saturate(1.3);
}
/* Hover effect: grayscale to color */
.team-photo {
filter: grayscale(100%);
transition: filter 0.4s ease;
}
.team-photo:hover {
filter: grayscale(0%);
}
/* drop-shadow follows alpha channel (unlike box-shadow) */
.png-icon {
/* box-shadow would create a rectangular shadow */
/* drop-shadow follows the actual shape of the PNG */
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
}
/* Disabled/loading state */
.disabled {
filter: grayscale(100%) opacity(0.5);
pointer-events: none;
}Filters are applied in declaration order. Chaining them creates compound effects like the vintage filter. drop-shadow is more versatile than box-shadow because it traces the element's actual shape, including transparent PNG regions and CSS clip-paths.
/* Glassmorphism card */
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 24px;
}
/* Frosted glass navbar */
.navbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px) saturate(180%);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* Dark mode variant */
.navbar-dark {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Modal overlay with blurred background */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
}
/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
.glass-card {
background: rgba(255, 255, 255, 0.9);
}
}backdrop-filter blurs or modifies the content behind an element. The element itself needs a semi-transparent background for the effect to be visible. Combine blur with saturate for a vibrant frosted look. Always provide a fallback with @supports for older browsers.
/* Text that blends with background */
.blend-text {
font-size: 72px;
font-weight: 900;
color: white;
mix-blend-mode: difference;
/* Text will always be readable regardless of background */
}
/* Colored overlay on image */
.image-overlay {
position: relative;
}
.image-overlay::after {
content: '';
position: absolute;
inset: 0;
background: #3b82f6;
mix-blend-mode: multiply;
}
/* Interesting text effects */
.knockout-text {
background: url('pattern.jpg');
color: white;
mix-blend-mode: screen;
/* Creates a knockout/reveal effect */
}
/* Common blend modes compared */
.multiply { mix-blend-mode: multiply; } /* Darkens */
.screen { mix-blend-mode: screen; } /* Lightens */
.overlay { mix-blend-mode: overlay; } /* Contrast boost */
.darken { mix-blend-mode: darken; } /* Keeps darker pixels */
.lighten { mix-blend-mode: lighten; } /* Keeps lighter pixels */
.dodge { mix-blend-mode: color-dodge; } /* Bright highlights */
.difference{ mix-blend-mode: difference; } /* Invert effect */mix-blend-mode controls how an element's colors interact with those behind it. multiply darkens (good for colored overlays on images), screen lightens, and difference creates an auto-contrast effect that keeps text readable over any background.
/* Duotone effect: Image + solid color */
.duotone {
background-image: url('photo.jpg');
background-color: #3b82f6;
background-blend-mode: multiply;
background-size: cover;
}
/* Different duotone colors */
.duotone-warm {
background-image: url('photo.jpg');
background-color: #f59e0b;
background-blend-mode: overlay;
background-size: cover;
}
/* Gradient overlay on image */
.gradient-overlay {
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)),
url('hero.jpg');
background-blend-mode: normal;
background-size: cover;
}
/* Multiple backgrounds blending */
.pattern-blend {
background:
repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 20px),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-blend-mode: overlay;
}
/* Hover duotone reveal */
.image-card {
background-image: url('photo.jpg');
background-color: #8b5cf6;
background-blend-mode: multiply;
background-size: cover;
transition: background-color 0.4s ease;
}
.image-card:hover {
background-color: transparent;
/* Reveals the original unblended image */
}background-blend-mode blends an element's background layers together. The duotone effect (image + solid color + multiply) is used on many modern sites. Setting background-color to transparent on hover smoothly reveals the original image.
filter, backdrop-filter, mix-blend-mode, background-blend-mode, Visual Effects