Filter Preview
The CSS filter property applies graphical effects like blurring, color shifting and brightness adjustments to an element. It works on any element including images, text, backgrounds and SVGs. Filters are hardware-accelerated in modern browsers, making them performant for UI effects.
The filter property applies effects to the element itself, while backdrop-filter applies effects to the area behind the element. This is what makes glassmorphism effects possible — you blur the background behind a semi-transparent card without blurring the card content.
blur() applies a Gaussian blur measured in pixels. brightness() adjusts overall lightness where 100% is normal, 0% is black. contrast() adjusts the difference between light and dark areas. grayscale() converts colors to shades of gray. hue-rotate() shifts all colors by a degree value on the color wheel. invert() inverts colors. saturate() adjusts color intensity. sepia() adds a warm brownish tone.
CSS filters are GPU-accelerated but blur() with large values can be expensive, especially on mobile. Keep blur under 20px for animated elements. backdrop-filter is more expensive than filter because the browser needs to composite the background content first. Test on low-end devices when using filters on scrolling content.
The filter property is supported in all modern browsers. backdrop-filter has been supported since Chrome 76, Firefox 103, and Safari 9. For older Firefox versions you may need the -webkit-backdrop-filter prefix.