Back to Lessons

CSS Filters Effects

April 5, 2026

CSS Filters and Backdrop

Photoshop-like effects with single properties.

Filter Functions

.image {
  filter: 
    brightness(1.2) 
    contrast(1.1) 
    saturate(1.3) 
    drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

.blur {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.2);
}

Filter List

  • blur(), brightness(), contrast()
  • drop-shadow() vs box-shadow
  • grayscale(), sepia(), hue-rotate()
  • backdrop-filter (glass morphism)
Previous Lesson Next Lesson