← Back to Curriculum

CSS Filters

📚 Lesson 12 of 16 ⏱️ 30 min

CSS Filters

30 min

CSS Filters provide graphical effects like blurring, color shifting, or brightness adjustment, similar to what you might find in Photoshop or Instagram. They are applied using the `filter` property.

Common filter functions include `blur()`, `brightness()`, `contrast()`, `grayscale()`, `hue-rotate()`, `invert()`, `opacity()`, `saturate()`, and `sepia()`. You can chain multiple filters together (e.g., `filter: grayscale(100%) blur(2px);`).

A newer addition is `backdrop-filter`, which applies effects to the area *behind* an element. This is famous for creating the 'Frosted Glass' (Glassmorphism) effect seen in modern OS interfaces.

Filters are powerful but can be computationally expensive. Overusing them, especially `blur` on large areas, can slow down page rendering, particularly on mobile devices.

Key Concepts

  • Filters apply graphical effects to elements.
  • Common effects: Blur, Grayscale, Brightness.
  • `backdrop-filter` affects the background behind the element.
  • Filters can be chained for complex looks.
  • Performance impact can be significant.

Learning Objectives

Master

  • Applying standard filter functions
  • Combining multiple filters
  • Creating the 'Glassmorphism' effect
  • Understanding filter performance implications

Develop

  • Visual design enhancement
  • Creating mood and atmosphere
  • Replacing image editing with CSS

Tips

  • Use `filter: drop-shadow()` instead of `box-shadow` for transparent images (it follows the shape!).
  • Use `grayscale(100%)` for a black-and-white mode.
  • Combine `brightness` and `contrast` to fix poor image quality.
  • Use `backdrop-filter` with a semi-transparent background color.

Common Pitfalls

  • Using large blur radii (expensive to render).
  • Expecting `backdrop-filter` to work without browser prefixes in older browsers.
  • Not testing filters on low-end devices.
  • Confusing `opacity` filter with `opacity` property (they stack).

Summary

  • Filters bring image editing to CSS.
  • They enable effects like grayscale and blur.
  • Backdrop-filter creates glass effects.
  • Use them wisely to avoid lag.

Exercise

Apply a grayscale filter to an image and make it color on hover.

img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

img:hover {
  filter: grayscale(0%);
}

Exercise Tips

  • Try combining multiple filters: filter: grayscale(50%) blur(2px) brightness(1.2);
  • Use backdrop-filter for glassmorphism effects: backdrop-filter: blur(10px);
  • Experiment with different filter values: saturate(150%), contrast(120%).
  • Create a hover effect that combines filters: filter: brightness(1.2) contrast(1.1);

Code Editor

Output