Web Analytics
☕ Coffee 𝕏 Follow
0%

Filters & Blend Modes

Advanced ~9 min read

What are CSS Filters?

CSS filters apply visual effects like blur, brightness, and saturation to elements. Perfect for images and creative effects!

Blur Filter

filter: blur() creates a Gaussian blur effect. Great for backgrounds and focus effects.

HTML
CSS
JS

Brightness & Contrast

Adjust brightness and contrast with brightness() and contrast(). Values > 1 increase, < 1 decrease.

HTML
CSS
JS

Grayscale & Sepia

Convert to grayscale or add vintage sepia tone. Values from 0 (none) to 1 (full effect).

HTML
CSS
JS

Multiple Filters

Combine multiple filters by separating them with spaces. Order matters!

HTML
CSS
JS

Backdrop Filter

backdrop-filter applies filters to the area behind an element. Perfect for glassmorphism!

HTML
CSS
JS

Blend Modes

mix-blend-mode controls how elements blend with their background. Similar to Photoshop blend modes!

HTML
CSS
JS
Performance Note: Filters can be GPU-intensive. Use them sparingly, especially blur() and backdrop-filter, to maintain good performance!

Summary

  • filter: blur() - Gaussian blur
  • brightness(), contrast() - Adjust lighting
  • grayscale(), sepia() - Color effects
  • backdrop-filter - Filter background behind element
  • mix-blend-mode - Blend with background
  • Combine multiple filters with spaces

Quick Quiz

Which property filters the area behind an element?

A
filter
B
backdrop-filter
C
background-filter
D
behind-filter
Previous CSS Functions
Next Best Practices