filter Syntax
/* Single filter */
filter: blur(4px);
/* Multiple filters — space-separated, applied left to right */
filter: brightness(0.8) contrast(1.2) saturate(1.5);
/* Remove all filters */
filter: none;All Filter Functions
blur()
filter: blur(0); /* no blur */
filter: blur(4px); /* moderate blur */
filter: blur(20px); /* heavy blur — text unreadable */
/* Use cases */
.modal-bg { filter: blur(4px); } /* blur page behind modal */
.loading-img { filter: blur(8px); transition: filter 0.3s; } /* reveal when loaded */
.loading-img.loaded { filter: blur(0); }brightness()
filter: brightness(1); /* normal (default) */
filter: brightness(0); /* completely black */
filter: brightness(0.5); /* 50% darker */
filter: brightness(1.5); /* 50% brighter */
filter: brightness(2); /* double brightness */
/* Image hover brighten */
.card-image:hover { filter: brightness(1.1); }contrast(), grayscale(), saturate()
/* contrast — 1 = normal, >1 = more contrast, <1 = flat */
filter: contrast(1.3); /* punchy, vivid */
filter: contrast(0.7); /* washed out, low contrast */
/* grayscale — 0 = normal, 1 = fully grey */
filter: grayscale(1); /* black and white */
filter: grayscale(0.5); /* half desaturated */
/* Reveal color on hover */
.photo { filter: grayscale(1); transition: filter 0.4s ease; }
.photo:hover { filter: grayscale(0); }
/* saturate — 1 = normal, 0 = grey, >1 = vivid */
filter: saturate(0); /* same as grayscale(1) */
filter: saturate(2); /* very vivid colors */
filter: saturate(1.4); /* slightly boosted — magazine look */hue-rotate(), invert(), sepia(), opacity()
/* hue-rotate — shift all colors around color wheel (0–360deg) */
filter: hue-rotate(90deg); /* shift 90 degrees */
filter: hue-rotate(180deg); /* complementary colors */
filter: hue-rotate(-45deg); /* shift backwards */
/* invert — 0 = normal, 1 = fully inverted */
filter: invert(1); /* negative/inverted image */
filter: invert(0.8); /* partial invert */
/* Dark mode image inversion */
@media (prefers-color-scheme: dark) {
img { filter: invert(0.9) hue-rotate(180deg); } /* smart invert for photos */
}
/* sepia — 0 = normal, 1 = fully sepia-toned */
filter: sepia(1); /* old photo look */
filter: sepia(0.4); /* warm vintage tint */
/* opacity() — same as the opacity property, but composites differently */
filter: opacity(0.5);
/* opacity property: affects element and its stacking context
filter opacity: composited before blending with siblings */drop-shadow()
drop-shadow() is like box-shadow but it follows the actual shape of the element — including transparent areas and non-rectangular shapes like PNGs or SVGs.
/* drop-shadow(offset-x offset-y blur color) — no spread radius */
filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.3));
filter: drop-shadow(0 4px 12px #1572B620);
/* Compared to box-shadow (rectangular, ignores PNG transparency) */
box-shadow: 2px 4px 8px rgba(0,0,0,0.3);
/* Best use: SVG icons, PNG images, complex shaped elements */
.icon-svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
/* Multiple drop-shadows */
filter:
drop-shadow(0 1px 2px rgba(0,0,0,0.2))
drop-shadow(0 4px 8px rgba(0,0,0,0.15));backdrop-filter – The Glassmorphism Effect
backdrop-filter applies filters to the content behind an element, not to the element itself. This creates the frosted glass / glassmorphism effect seen throughout modern UI design.
/* Glass panel effect */
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) brightness(1.1);
-webkit-backdrop-filter: blur(12px) brightness(1.1); /* Safari */
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
}
/* Dark glass */
.dark-glass {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(16px) saturate(1.5);
-webkit-backdrop-filter: blur(16px) saturate(1.5);
}
/* Frosted navigation bar */
.navbar {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.4);
}
/* Important: the element needs a background (even rgba(0,0,0,0) has no effect) */
/* The parent must not have overflow:hidden or clip the element */mix-blend-mode
Controls how an element's colors blend with the layers beneath it — like Photoshop blend modes.
mix-blend-mode: normal; /* default — no blending */
mix-blend-mode: multiply; /* darkens — white becomes transparent */
mix-blend-mode: screen; /* lightens — black becomes transparent */
mix-blend-mode: overlay; /* contrast — light areas lighten, dark areas darken */
mix-blend-mode: darken; /* keeps darker of two colors */
mix-blend-mode: lighten; /* keeps lighter of two colors */
mix-blend-mode: color-dodge; /* brightens based on blend color */
mix-blend-mode: difference; /* inverts based on difference */
mix-blend-mode: luminosity; /* keeps luminance, uses base hue/saturation */
mix-blend-mode: color; /* keeps hue/saturation, uses base luminance */
/* Practical uses */
/* Text on image: multiply makes white transparent */
.caption-overlay {
mix-blend-mode: multiply;
background: #1572B6; /* looks like a tinted overlay on the image */
}
/* Duotone photo effect */
.photo-container { position: relative; }
.photo { display: block; }
.photo-tint {
position: absolute; inset: 0;
background: linear-gradient(to bottom, #1572B6, #FFD43B);
mix-blend-mode: color; /* replaces colors while keeping luminance */
}📋 Summary
- filter: blur(px) — gaussian blur. Use for modal backgrounds, loading reveals.
- filter: brightness(n) — 1=normal, <1=darker, >1=brighter.
- filter: grayscale(0–1) — desaturate. Hover to reveal color.
- filter: saturate(n) — boost or reduce color intensity.
- filter: contrast(n) — increase or decrease contrast.
- filter: hue-rotate(deg) — shift all colors around the color wheel.
- filter: sepia(0–1) — warm vintage tone.
- filter: drop-shadow() — shape-aware shadow for SVGs and PNGs.
- backdrop-filter: blur() — blur what's behind the element. Glassmorphism.
- mix-blend-mode — Photoshop-style layer blending.
multiply,screen,overlaymost useful. - Multiple filters: space-separate them. Applied left to right.
Frequently Asked Questions
Both make an element transparent, but they composite differently. The opacity property creates a new stacking context and applies transparency to the composited element (including all children). filter: opacity() is applied before compositing, meaning it interacts with mix-blend-mode and other compositing operations differently. For simply making an element transparent: use the opacity property. Only use filter: opacity() when you need it to interact with other filter functions in a specific way.
Firefox required a flag to enable backdrop-filter until version 103 (2022). All modern browsers support it now, but Safari still requires the -webkit-backdrop-filter prefix. Always include both: -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);. Also, backdrop-filter may not work if the element or any ancestor has overflow: hidden clipping it, or if the parent has will-change: transform in some browsers.
Most filters promote the element to its own compositor layer and are GPU accelerated — but they still trigger repaint (not just composite). Animating filter: blur() or filter: brightness() is generally smooth on modern devices, but heavier than animating transform or opacity alone. For performance-critical animations (60fps on low-end mobile), stick to transform and opacity. For richer visual effects where occasional frame drops are acceptable, animated filters are fine.
box-shadow always creates a rectangular shadow matching the element's border-box — it ignores transparent areas. filter: drop-shadow() creates a shadow that follows the element's actual rendered shape, including transparent PNG areas and SVG paths. Use box-shadow for rectangular elements (cards, buttons). Use filter: drop-shadow() for icons, logos, and images with transparency where you want the shadow to follow the actual shape.