/

HTML / CSS / JavaScript Tutorial

CSS Property: filter

[this page | pdf | back links]

The CSS (CSS3) filter property applies visual effects like grayscale, blur and saturation to an element (usually an <img> element).

 

Valid property values (other than inherit and initial) are:

 

Value

Description

blur(length)

Blur added. Length needs to be in px, e.g. 5px. Larger value creates more blur. If no value is specified then 0 is used which leaves image unaltered

brightness(% or number)

Brightness adjusted. 0% (or 0) makes completely black, 100% (or 1) leaves image unaltered and is the default. Values over 100% will add to brightness.

contrast(% or number)

Contrast adjusted. 0% (or 0) makes completely black, 100% (or 1) leaves image unaltered and is the default. Values over 100% will add to contrast.

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

Drop shadow applied:

h-shadow (required). Value (in px) for horizontal shadow (negative values have shadow on left of image

v-shadow (required). Value (in px) for horizontal shadow (negative values have shadow above image

blur (optional). Value (in px) adding blur effect to shadow, see above

spread (optional). Value (in px) which causes shadow to expand (positive) or shrink (negative). Some browsers do not support this parameter

color (optional). Adds CSS colour to the shadow, default depends on browser but is usually black.

grayscale(% or number)

Converts to grayscale. 0% (or 0) is default and leaves image unaltered, 100% (or 1) makes image completely gray (i.e. black and white).

hue-rotate(angle)

Applies a hue rotation to image (see CSS colours for more details of hues). Angle needs to be in degrees, e.g. 20deg. Default is 0deg, which leaves image unaltered

invert(% or number)

Inverts colours/brightness in image. 0% (or 0) is default and leaves image unaltered, 100% (or 1) completely inverts colouring.

none

(default value). No effect applied

opacity(% or number)

Sets opacity level (i.e. degree of transparency) for image. 0% (or 0) is completely transparent. 100% (or 1) is default and leaves image unaltered (no transparency). Is similar to opacity property.

saturate(% or number)

Saturates image. 0% (or 0) makes image completely unsaturated. 100% (or 1) is default and leaves image unaltered. Values over 100% (or 1) add saturation.

sepia(% or number)

Converts image to sepia. 0% (or 0) is default and leaves image unaltered, 100% (or 1) makes image completely sepia (i.e. old photography style black and white).

url(filename)

Takes the location of an XML file that specifies an SVG filter (including potentially an anchor to a specific filter element, e.g.:

filter: url(svg-url#svg-element-id)

 

Default Value:

none

JavaScript syntax:

e.g. object.style.filter="grayscale(90%)"

Inherited:

No

Animatable:

Yes

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
img.x1 {filter: blur(2px);}
</style>
</head>
<body>
1. Element with default property<br>
<img src="NematrianLogo.png"><br><br>
2. Element set using in-file HTML style<br>
<img src="NematrianLogo.png" class="x1"><br><br>
3. Element set using JavaScript<br>
<img src="NematrianLogo.png" id="x2"><br><br>

<script>
document.getElementById("x2").style.filter = "blur(2px)";
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyFilter() {
  var x = document.createElement("DIV"); x.style.filter = "blur(2px)"; return (window.getComputedStyle(x, null).filter == "blur(2px)");
}


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile