CSS Filter Property
The filter property is used to set the visual effect of an element. This property is mostly used in image content for adjusting the image rendering, background, border, etc.
| Parameter | Details |
|---|---|
| blur(x) | Blurs the image by x pixels. |
| brightness(x) | Brightens the image at any value above 1.0 or 100%. Below that, the image will be darkened. |
| contrast(x) | Provides more contrast to the image at any value above 1.0 or 100%. Below that, the image will get less saturated. |
| drop-shadow(h, v, x, y, z) | Gives the image a drop-shadow. h and v can have negative values. x, y, and z are optional. |
| greyscale(x) | Shows the image in greyscale, with a maximum value of 1.0 or 100%. |
| hue-rotate(x) | Applies a hue-rotation to the image. |
| invert(x) | Inverts the color of the image with a maximum value of 1.0 or 100%. |
| opacity(x) | Sets how opaque/transparent the image is with a maximum value of 1.0 or 100%. |
| saturate(x) | Saturates the image at any value above 1.0 or 100%. Below that, the image will start to de-saturate. |
| sepia(x) | Converts the image to sepia with a maximum value of 1.0 or 100%. |
Blur
.img {
-webkit-filter: blur(1px);
filter: blur(1px);
}
Drop Shadow
.textShadow {
-webkit-filter: drop-shadow(10px 10px 1px green);
filter: drop-shadow(10px 10px 1px green);
}
My shadow always follow me.
Hue Rotate
.hue {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
Invert Color
.invert {
width: 100px;
height: 100px;
background-color: white;
-webkit-filter: invert(100%);
filter: invert(100%);
}