CSS Filter Property

CSS3 has truly enabled us to do more with very less. The Filter is an example of the same. This property defines visual effects (like blur and saturation) to an element (often <img>).

Usage

Lets use this image and apply the various filter effect and seee how they actually look!

1. blur(x)

This function applies blur effect to the underlying element. The value defined in the function x is mentioned in pixels (px). The higher the value the more the blur

img {
    -webkit-filter: blur(5px); /* Safari */
    filter: blur(5px);
}

2. brightness(%)

This function can be used to adjust the brightness of an element. The value in the function is mentioned in percentage. 0% will make the image completely black and 100% will revert the image back to its original state.

img {
    -webkit-filter: brightness(50%); /* Safari */
    filter: brightness(50%);
}

3. contrast(%)

This function can be used to adjust the contrast of an element. The value in the function is mentioned in percentage. 0% will make the image completely black and 100% will revert the image back to its original state.

img {
    -webkit-filter: contrast(50%); /* Safari */
    filter: contrast(50%);
}

4. drop-shadow(h-shadow v-shadow blur spread color)

This function can be used to add a drop shadow to an element.

h-shadow (Required). Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.

v-shadow (Required). Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

blur (Optional). This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow’s edge is sharp).

spread (Optional). This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.

color (Optional). Adds a color to the shadow. If not specified, the color depends on the browser (often black).

Tip: This filter is similar to the box-shadow property.

img {
    -webkit-filter: drop-shadow(8px 8px 10px gray); /* Safari */
    filter: drop-shadow(8px 8px 10px gray);
}

5. grayscale(%)

This function can be used to convert an element to grayscale. The value in the function is mentioned in percentage. 0% is default and represents the original image, and 100% will make the image completely gray.

img {
    -webkit-filter: grayscale(100%); /* Safari */
    filter: grayscale(100%);
}

6. hue-rotate(deg)

This function applies hue rotation to an element. The value in the function is mentioned in degrees. 0deg is the default and represents the original image. The maximum value for this can be 360

img {
    -webkit-filter: hue-rotate(90deg); /* Safari */
    filter: hue-rotate(90deg);
}

7. invert(%)

This function inverts the samples of an element. The value in the function is mentioned in percent. 0% is the default and represents the original image. 100% will completely invert the image

img {
    -webkit-filter: invert(100%); /* Safari */
    filter: invert(100%);
}

8. opacity(%)

This function sets opacity to an element. The value in the function is mentioned in percent. 0% is completely transparent where as 100% represents the original image.

img {
    -webkit-filter: opacity(30%); /* Safari */
    filter: opacity(30%);
}

9. saturate(%)

This function saturate the element. The value in the function is mentioned in percent. 0% will make the element completely unsaturated where as 100% represents the original image.

img {
    -webkit-filter: saturate(30%); /* Safari */
    filter: saturate(30%);
}

10. sepia(%)

This function coverts image to sepia. The value in the function is mentioned in percent. 0% represents the original state of the image and 100% converts entire image to sepia.

img {
    -webkit-filter: sepia(100%); /* Safari */
    filter: sepia(100%);
}

10. url()

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

img {
    -webkit-filter: url(svg-url#element-id); /* Safari */
    filter: url(svg-url#element-id);
}

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.