CSS filters and blend modes allow you to apply visual effects to elements without image editing software. Filters can blur, brighten, adjust contrast, convert to grayscale, and more—all with pure CSS. Blend modes control how elements blend with their backgrounds, creating effects like overlays, multiply, and screen. These powerful tools bring Photoshop-style effects directly to the web, enabling artistic designs and dynamic image treatments.
CSS Filters
The filter property applies graphical effects like blur, brightness, and contrast to elements. Effects can be combined for complex visual treatments.
Filter Functions
| Property | Values | Description |
|---|---|---|
blur() | px or rem | Applies Gaussian blur |
brightness() | 0 to ∞ (1 = normal) | Adjusts brightness |
contrast() | 0 to ∞ (1 = normal) | Adjusts contrast |
grayscale() | 0 to 1 (0% to 100%) | Converts to grayscale |
hue-rotate() | Degrees (deg) | Rotates hue |
invert() | 0 to 1 (0% to 100%) | Inverts colors |
opacity() | 0 to 1 (0% to 100%) | Adjusts transparency |
saturate() | 0 to ∞ (1 = normal) | Adjusts saturation |
sepia() | 0 to 1 (0% to 100%) | Converts to sepia |
drop-shadow() | x y blur color | Adds drop shadow |
/* Single filter */
.element {
filter: blur(5px);
filter: brightness(1.5);
filter: contrast(200%);
filter: grayscale(100%);
}
/* Multiple filters (combine effects) */
.element {
filter: brightness(1.2) contrast(1.1) saturate(1.3);
}
/* Common patterns */
.image-blur {
filter: blur(10px);
}
.image-brighten {
filter: brightness(1.5);
}
.image-darken {
filter: brightness(0.7);
}
.image-bw {
filter: grayscale(100%);
}
.image-vintage {
filter: sepia(60%) contrast(1.1) brightness(0.9);
}
/* Hover effects */
.image {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.image:hover {
filter: grayscale(0%);
}blur() - Gaussian Blur
blur() applies a Gaussian blur effect. Accepts values in pixels (px) or rem units.
/* Blur values */
.element {
filter: blur(0px); /* No blur */
filter: blur(2px); /* Subtle blur */
filter: blur(5px); /* Moderate blur */
filter: blur(10px); /* Strong blur */
filter: blur(20px); /* Very strong blur */
}
/* Common uses */
.background-blur {
filter: blur(8px); /* Blurred background */
}
.loading-blur {
filter: blur(3px); /* Loading state */
}
.focus-effect:not(:focus) {
filter: blur(2px); /* Blur non-focused elements */
}blur() Filter Examples
brightness() and contrast()
brightness() and contrast() adjust brightness and contrast. Values below 1 darken/reduce, values above 1 brighten/increase.
/* Brightness */
.element {
filter: brightness(0.5); /* 50% - darker */
filter: brightness(1); /* 100% - normal */
filter: brightness(1.5); /* 150% - brighter */
filter: brightness(2); /* 200% - very bright */
}
/* Contrast */
.element {
filter: contrast(0.5); /* 50% - less contrast */
filter: contrast(1); /* 100% - normal */
filter: contrast(1.5); /* 150% - more contrast */
filter: contrast(2); /* 200% - high contrast */
}
/* Combined */
.element {
filter: brightness(1.2) contrast(1.3);
}
/* Percentage values also work */
.element {
filter: brightness(80%);
filter: contrast(150%);
}brightness() and contrast() Examples
Color Filters
Grayscale, sepia, hue-rotate, and saturate filters modify colors in different ways.
/* Grayscale - removes color */
.element {
filter: grayscale(0); /* No effect */
filter: grayscale(0.5); /* 50% gray */
filter: grayscale(1); /* Full grayscale */
filter: grayscale(100%); /* Same as 1 */
}
/* Sepia - vintage/warm tone */
.element {
filter: sepia(0.6); /* 60% sepia */
filter: sepia(100%); /* Full sepia */
}
/* Hue-rotate - shifts colors */
.element {
filter: hue-rotate(90deg); /* Rotate hue 90° */
filter: hue-rotate(180deg); /* Opposite colors */
filter: hue-rotate(360deg); /* Full circle */
}
/* Saturate - color intensity */
.element {
filter: saturate(0); /* No color (grayscale) */
filter: saturate(1); /* Normal */
filter: saturate(2); /* 200% saturation */
}
/* Vintage photo effect */
.vintage {
filter: sepia(0.6) contrast(1.1) brightness(0.95);
}Color Filter Examples
drop-shadow() Filter
drop-shadow() creates a shadow that follows the shape of transparent images, unlike box-shadow which creates a rectangular shadow.
/* Drop shadow syntax: x-offset y-offset blur color */
.element {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
}
/* Simple shadow */
.element {
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
/* Multiple drop shadows */
.element {
filter:
drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))
drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
/* Colored shadows */
.element {
filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.8));
}
/* Difference from box-shadow */
.box-shadow {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
/* Creates rectangular shadow */
}
.drop-shadow {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));
/* Follows actual shape of element */
}drop-shadow() vs box-shadow
💡 drop-shadow() Use Cases:
Use drop-shadow() for PNG images, icons, and SVGs with transparency. It creates shadows that follow the actual shape, not just the bounding box. Perfect for logos, icons, and irregular shapes.
backdrop-filter
backdrop-filter applies filters to the area behind an element. Perfect for frosted glass effects.
/* Backdrop filter uses same functions as filter */
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
/* Frosted glass effect */
.frosted {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Dark glass */
.dark-glass {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px) brightness(0.8);
}
/* Browser support check */
@supports (backdrop-filter: blur(10px)) {
.glass {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: blur(10px)) {
.glass {
background: rgba(255, 255, 255, 0.8); /* Fallback */
}
}backdrop-filter Examples
Blend Modes
mix-blend-mode controls how an element's content blends with its background. Similar to blend modes in design software.
Common Blend Modes
| Property | Values | Description |
|---|---|---|
normal | Default | No blending |
multiply | Darken | Multiplies colors (darker) |
screen | Lighten | Inverted multiply (lighter) |
overlay | Multiply + Screen | Combines multiply and screen |
darken | Keep darker | Selects darker of two colors |
lighten | Keep lighter | Selects lighter of two colors |
color-dodge | Brighten | Brightens background |
color-burn | Darken | Darkens background |
difference | Subtract | Subtracts colors |
exclusion | Similar to difference | Softer difference |
/* Basic blend mode */
.element {
mix-blend-mode: multiply;
}
/* Common blend modes */
.overlay-text {
mix-blend-mode: overlay;
color: white;
}
.multiply-image {
mix-blend-mode: multiply;
}
.screen-effect {
mix-blend-mode: screen;
}
/* Background blend mode */
.element {
background-image: url('image.jpg'), linear-gradient(blue, red);
background-blend-mode: multiply;
}
/* Text effects */
.glowing-text {
background: linear-gradient(45deg, #f093fb, #f5576c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
mix-blend-mode: screen;
}mix-blend-mode Examples
Practical Filter and Blend Mode Examples
Image Hover Effects
Image Hover Effects
Text Overlay with Blend Modes
Text with Blend Modes
Key Takeaways
- filter: Applies visual effects (blur, brightness, contrast, etc.)
- blur(): Gaussian blur in pixels
- brightness(): 0 to ∞ (1 = normal, 2 = 200%)
- contrast(): 0 to ∞ (1 = normal)
- grayscale(): 0 to 1 (0% to 100%)
- hue-rotate(): Degrees to shift colors
- saturate(): Color intensity (0 to ∞)
- drop-shadow(): Follows shape (vs box-shadow rectangle)
- backdrop-filter: Blurs background (frosted glass)
- mix-blend-mode: Photoshop-style blending
- Multiple filters can be combined
- Filters work on any element (images, text, divs)
What's Next?
Now that you understand CSS filters and blend modes, you're ready to learn about CSS Variables. In the next lesson, we'll explore custom properties (CSS variables) that let you store and reuse values throughout your stylesheets, making your CSS more maintainable and dynamic.
Filters and blend modes bring powerful visual effects to the web without image editing software. From simple grayscale hovers to complex frosted glass effects, these tools let you create stunning designs with pure CSS. Practice combining filters for unique looks, and remember: subtlety often works best—a little filter goes a long way!