Blur
Gaussian blur. Higher values = more blur.
1. CSS Filter Functions
The filter property applies visual effects like blur, color shifts, and brightness adjustments. Multiple filters can be chained in a single declaration.
Bright
Above 1 = brighter, below 1 = darker, 0 = black.
Contrast
Increases difference between light and dark areas.
Gray
0 = full color, 1 = completely desaturated.
Hue
Rotates all colors around the color wheel.
Invert
Inverts all colors. 0.5 produces mid-gray.
Saturate
Above 1 = more vivid, below 1 = washed out.
Sepia
Warm brownish tone like old photographs.
/* Individual filter functions */
filter: blur(3px); /* Gaussian blur */
filter: brightness(1.5); /* 0 = black, 1 = normal, 2 = 2x bright */
filter: contrast(2); /* 0 = gray, 1 = normal */
filter: grayscale(1); /* 0 = color, 1 = gray */
filter: hue-rotate(90deg); /* 0-360deg color wheel rotation */
filter: invert(1); /* 0 = normal, 1 = fully inverted */
filter: saturate(3); /* 0 = gray, 1 = normal, 3 = vivid */
filter: sepia(1); /* 0 = normal, 1 = full sepia */
filter: opacity(0.5); /* like opacity property but composited differently */
/* Chain multiple filters */
filter: contrast(1.2) brightness(1.1) saturate(1.5);2. Filter Combinations
Chain multiple filter functions to create preset-like effects. The order matters: filters are applied left to right.
Vintage
sepia(0.4) contrast(1.2) brightness(0.9)
Frost
brightness(1.1) saturate(0.8) blur(0.5px)
Dramatic
contrast(1.5) brightness(0.8) saturate(1.3)
Muted
grayscale(0.5) brightness(1.1) opacity(0.9)
/* Vintage warm tone */
.vintage { filter: sepia(0.4) contrast(1.2) brightness(0.9); }
/* Soft frost */
.frost { filter: brightness(1.1) saturate(0.8) blur(0.5px); }
/* Dramatic cinema */
.dramatic { filter: contrast(1.5) brightness(0.8) saturate(1.3); }
/* Muted pastel */
.muted { filter: grayscale(0.5) brightness(1.1) opacity(0.9); }3. Filter Hover Effects
Transition filters on hover for interactive image galleries and cards. Use transition: filter for smooth animations.
Hover me
Starts grayscale, reveals color on hover. Classic gallery pattern.
Hover me
Blurs on hover. Often used with an overlay label.
Hover me
Increased brightness and contrast for a pop effect.
Hover me
180-degree hue rotation creates a complementary color effect.
/* Grayscale to color reveal */
.card img {
filter: grayscale(1);
transition: filter 0.4s ease;
}
.card:hover img {
filter: grayscale(0);
}
/* Blur with overlay text */
.card:hover img { filter: blur(3px); }
.card:hover .overlay { opacity: 1; }
/* Brightness pop */
.card:hover { filter: brightness(1.4) contrast(1.1); }
/* Hue shift */
.card:hover { filter: hue-rotate(180deg); }4. backdrop-filter (Frosted Glass)
backdrop-filter applies effects to the area behind an element. Combined with a semi-transparent background, it creates the popular frosted glass effect.
Frosted Glass
backdrop-filter: blur(12px) on a semi-transparent panel.
Saturated Glass
blur(20px) saturate(1.5) for a vibrant glass effect.
Light Glass
Higher background opacity with blur(16px) for a light frosted look.
/* Frosted glass panel */
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Safari */
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1rem;
}
/* Vibrant glass (Apple-style) */
.glass-vibrant {
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
}
/* Light mode glass */
.glass-light {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}5. mix-blend-mode
mix-blend-mode controls how an element's colors blend with its parent's background. Like Photoshop layer blending modes but in CSS.
BLEND
Darkens by multiplying colors. White disappears.
BLEND
Lightens. Opposite of multiply. Black disappears.
Combines multiply and screen. Increases contrast.
BLEND
Subtracts colors. Creates inverted, psychedelic effects.
BLEND
Similar to difference but lower contrast. Softer inversion.
BLEND
Brightens the background. Creates a glowing, washed-out look.
/* mix-blend-mode on text */
.heading {
mix-blend-mode: difference;
color: white;
}
/* Common blend modes */
mix-blend-mode: multiply; /* darken: white disappears */
mix-blend-mode: screen; /* lighten: black disappears */
mix-blend-mode: overlay; /* contrast boost */
mix-blend-mode: difference; /* color inversion */
mix-blend-mode: exclusion; /* softer inversion */
mix-blend-mode: color-dodge; /* brighten/glow */
mix-blend-mode: color-burn; /* darken/deepen */
mix-blend-mode: hard-light; /* strong overlay */
mix-blend-mode: soft-light; /* gentle overlay */6. background-blend-mode
background-blend-mode blends an element's own background layers together. Stack multiple gradients or images and blend them for unique textures.
Two gradients
× multiply
× multiply
Two gradient backgrounds multiplied together.
Two gradients
× screen
× screen
Lightens dark gradients by screening them together.
High-contrast blend of warm and cool gradients.
Two gradients
× difference
× difference
Psychedelic color inversion between layers.
/* Blend two background layers */
.dual-gradient {
background:
linear-gradient(135deg, #ec4899, #f97316),
linear-gradient(225deg, #6366f1, #22c55e);
background-blend-mode: multiply;
}
/* Image + color overlay */
.tinted-image {
background:
linear-gradient(135deg, rgba(99,102,241,0.7), rgba(236,72,153,0.7)),
url('photo.jpg') center/cover;
background-blend-mode: overlay;
}
/* Multiple backgrounds + blend */
.complex {
background:
radial-gradient(circle at 30% 50%, #f97316, transparent),
radial-gradient(circle at 70% 50%, #6366f1, transparent),
#1e293b;
background-blend-mode: screen;
}