Intermediate LevelCSS & Modern Layouts
How do CSS filter and backdrop-filter create visual effects?
❓ Interview Prompt: Explain blur(), brightness(), contrast(), grayscale(), and backdrop-filter for frosted glass effects.
CSS filter applies graphical effects to an element's rendering, and backdrop-filter applies effects to the area behind an element:
filter Functions:
•
blur(4px): Gaussian blur.•
brightness(1.2): Increase/decrease brightness.•
contrast(1.5): Adjust contrast.•
grayscale(1): Convert to grayscale.•
saturate(2): Increase color saturation.•
drop-shadow(): Shadow following the element's alpha shape (unlike box-shadow).backdrop-filter:
Applies filters to everything behind the element, creating frosted glass effects. Requires a semi-transparent background on the element.
Code Implementation Example
css
/* Image hover grayscale to color */
img.gallery {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img.gallery:hover {
filter: grayscale(0%);
}
/* Frosted glass navbar */
.navbar-glass {
background: rgba(245, 237, 240, 0.7);
backdrop-filter: blur(12px) saturate(1.5);
-webkit-backdrop-filter: blur(12px) saturate(1.5);
}💡Grayscale-to-color hover effect and frosted glass navbar.
🎯 Interview Key Takeaway
backdrop-filter creates frosted glass effects. Always include -webkit-backdrop-filter for Safari compatibility.
#Filter#Backdrop#Effects#Intermediate
Back to all CSS & Modern Layouts Questions→