CSS Filters & Effects
Apply visual effects like blur, brightness, shadows, and blend modes directly in CSS. From subtle image adjustments to full glassmorphism UIs.
Filter Functions Overview
The filter property applies graphical effects to an element. You can chain multiple filter functions together in a single declaration.
.element { filter: blur(5px); /* Gaussian blur */ filter: brightness(1.5); /* brighten 150% */ filter: contrast(200%); /* double contrast */ filter: grayscale(100%); /* full grayscale */ filter: saturate(2); /* double saturation */ filter: sepia(80%); /* warm vintage tone */ filter: hue-rotate(90deg); /* shift hue */ filter: invert(100%); /* negative */ filter: opacity(50%); /* transparency */ filter: drop-shadow(4px 4px 8px #000); /* shadow following shape */ }
blur()
Applies a Gaussian blur to the element. The parameter is the blur radius — larger values create more blur.
.subtle { filter: blur(2px); } .medium { filter: blur(5px); } .heavy { filter: blur(15px); } /* Common: blur background image */ .hero-bg { filter: blur(8px); transform: scale(1.1); /* prevent blur edge artifacts */ }
brightness() & contrast()
brightness() adjusts the overall lightness. 1 / 100% is normal. contrast() adjusts the difference between darks and lights.
.darker { filter: brightness(0.6); } /* 60% brightness */ .brighter { filter: brightness(1.4); } /* 140% brightness */ .low-contrast { filter: contrast(0.5); } .high-contrast { filter: contrast(2); }
grayscale() & sepia()
grayscale() removes color. sepia() applies a warm, brown-toned vintage look.
.bw { filter: grayscale(100%); } /* fully desaturated */ .partial { filter: grayscale(50%); } /* half desaturated */ .vintage { filter: sepia(80%); } /* Classic: grayscale on hover reveal */ .team-photo { filter: grayscale(100%); transition: filter 0.4s; } .team-photo:hover { filter: grayscale(0%); }
saturate() & hue-rotate()
saturate() increases or decreases color intensity. hue-rotate() shifts all colors around the color wheel.
.vivid { filter: saturate(2.5); } /* super saturated */ .muted { filter: saturate(0.3); } /* desaturated */ .shifted { filter: hue-rotate(90deg); } /* shift hue 90 degrees */ .rainbow { filter: hue-rotate(180deg); } /* complementary colors */
invert() & opacity()
invert() creates a negative image. opacity() in filters is functionally similar to the opacity property but is applied as part of the filter pipeline.
.negative { filter: invert(100%); } .half-invert { filter: invert(50%); } .faded { filter: opacity(40%); } /* Quick dark mode for images */ .dark-mode-icon { filter: invert(1) hue-rotate(180deg); }
drop-shadow()
Unlike box-shadow, drop-shadow() follows the actual shape of the element (including transparent PNG outlines and clip-paths).
.shape-shadow { filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.4)); /* offset-x | offset-y | blur-radius | color */ } /* Works with clip-path shapes! */ .triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
box-shadow always creates a rectangular shadow matching the element's box. drop-shadow() traces the actual visual shape, including transparency. However, drop-shadow does not support inset or spread values.
Filter Functions Demo Grid
Each box below has a colorful gradient with a different filter applied. Hover to remove the filter and see the original.
Hover any card to remove its filter and see the original gradient.
Combining Filters
Chain multiple filters in a single declaration, separated by spaces. They are applied in order from left to right.
/* Vintage photo effect */ .vintage-photo { filter: sepia(60%) contrast(1.1) brightness(0.9) saturate(0.8); } /* Frosted / washed-out */ .washed { filter: brightness(1.2) contrast(0.85) saturate(0.7); } /* Dramatic dark */ .moody { filter: contrast(1.3) brightness(0.7) saturate(1.2); }
backdrop-filter
backdrop-filter applies filter effects to the area behind the element, not the element itself. The element must be semi-transparent for the effect to be visible.
.frosted { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Safari */ } /* Supports the same functions as filter */ .bg-bright { backdrop-filter: blur(10px) brightness(1.2); }
Glassmorphism
A popular design trend creating frosted glass UI elements using backdrop-filter, semi-transparent backgrounds, subtle borders, and shadows.
.glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); padding: 2rem; }
Frosted Glass
This card uses backdrop-filter: blur() with a semi-transparent background to create the glass effect.
box-shadow
Adds one or more shadow effects to an element's box. Syntax: offset-x offset-y blur spread color. Supports multiple comma-separated shadows and the inset keyword.
/* Basic shadow */ .shadow { box-shadow: 4px 6px 12px rgba(0,0,0,0.2); /* x y blur color */ } /* With spread */ .spread { box-shadow: 0 4px 12px 4px rgba(0,0,0,0.15); /* x y blur spread color */ } /* Multiple shadows (layered) */ .layered { box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1), 0 16px 32px rgba(0,0,0,0.1); } /* Inset shadow (inner shadow) */ .inset { box-shadow: inset 0 2px 8px rgba(0,0,0,0.3); }
text-shadow
Adds shadow effects to text. Same syntax as box-shadow but without spread or inset.
/* Basic text shadow */ .drop { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } /* Neon glow effect */ .neon { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa; } /* Emboss / letterpress */ .emboss { color: #333; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
mix-blend-mode
Controls how an element's content blends with the content behind it. Works like Photoshop layer blend modes.
.blend-multiply { mix-blend-mode: multiply; } /* darken */ .blend-screen { mix-blend-mode: screen; } /* lighten */ .blend-overlay { mix-blend-mode: overlay; } /* contrast boost */ .blend-darken { mix-blend-mode: darken; } .blend-lighten { mix-blend-mode: lighten; } .blend-diff { mix-blend-mode: difference; } /* invert overlap */ /* background-blend-mode blends background layers */ .bg-blend { background: url('photo.jpg'), linear-gradient(#667eea, #764ba2); background-blend-mode: overlay; }
normal
multiply
screen
overlay
difference
Neumorphism Pattern
A soft, extruded design style using subtle opposing box-shadows (one light, one dark) on a background that matches the page color.
.neumorph { background: #e0e5ec; border-radius: 16px; box-shadow: 8px 8px 16px #b8bec7, /* darker shadow */ -8px -8px 16px #ffffff; /* lighter shadow */ } /* Pressed / inset state */ .neumorph-pressed { background: #e0e5ec; box-shadow: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff; }
Gotchas
Like transforms, any element with a filter or backdrop-filter creates a new stacking context. This can affect z-index behavior and cause position: fixed children to break.
If the element's background is fully opaque, you will not see any backdrop-filter effect. The element must have a semi-transparent (or transparent) background.
backdrop-filter still requires -webkit-backdrop-filter in Safari. Always include both properties for cross-browser support.
Setting filter: none is not the same as removing the property. filter: none still creates a stacking context in some browsers. If you want to truly remove the filter, use filter: unset or remove the property entirely.
Large blur radii (especially backdrop-filter: blur()) are GPU-intensive. On low-end devices, heavy blur can cause frame drops. Consider reducing blur radius on mobile.
Pro Tips
Smoothly transition filters with transition: filter 0.3s ease;. Great for image hover effects like colorize-on-hover or blur-to-clear reveals.
Store shadow values in custom properties for easy theming: box-shadow: var(--shadow-elevation-medium);. Create light/dark shadow tokens for theme switching.
Instead of one shadow, use multiple layers with increasing blur and offset. This mimics natural light behavior. Google's Material Design uses this approach for elevation levels.
If you are using clip-path, transparent PNGs, or SVGs and want a shadow that follows the visible shape rather than the bounding box, use filter: drop-shadow() instead of box-shadow.
Frosted glass effects can reduce text readability. Always ensure sufficient contrast between text and the blurred background. Add a darker semi-transparent overlay if needed.