filter
property
CSS3
Applies graphical effects like blur, brightness, and color shifts to an element.
Syntax
filter: blur() | brightness() | contrast() | grayscale() | drop-shadow();
Example
css
.blur { filter: blur(4px); }
.bright { filter: brightness(1.3); }
.dark { filter: brightness(0.7); }
.gray { filter: grayscale(100%); }
.sepia { filter: sepia(80%); }
.contrast { filter: contrast(150%); }
/* Hover to color */
.bw-hover {
filter: grayscale(100%);
transition: filter 0.3s;
}
.bw-hover:hover { filter: grayscale(0%); }