4 min read
•Question 27 of 49easyHow Do CSS Filters Work?
Understanding blur, brightness, contrast and other filters.
What You'll Learn
- Filter functions
- Multiple filters
- Backdrop filter
Filter Functions
styles.cssCSS
.element {
filter: blur(5px);
filter: brightness(1.2);
filter: contrast(1.5);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: saturate(2);
filter: sepia(100%);
filter: drop-shadow(2px 2px 5px black);
}Multiple Filters
styles.cssCSS
.element {
filter: brightness(1.1) contrast(1.2) saturate(1.3);
}Backdrop Filter
styles.cssCSS
/* Blur behind element */
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
/* Frosted glass effect */
.modal-overlay {
backdrop-filter: blur(5px) brightness(0.8);
}