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