filter applies visual effects: blur(4px), brightness(0.8), grayscale(100%). backdrop-filter applies to the area behind an element — the key to the frosted glass glassmorphism effect popular in modern UI design.
CSS Filters
img {
filter: grayscale(100%); /* black & white */
filter: blur(4px); /* blur */
filter: brightness(0.8); /* darken */
filter: contrast(1.5); /* more contrast */
filter: sepia(50%); /* vintage */
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
/* Backdrop filter */
.glass {
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.1);
}