filter Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:filter

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. filter

Description

The filter property adds visual effects to images.

Filter Functions

The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

Filter Description
none Specifies no effects
blur(px) Applies a blur effect to the image.
brightness(%)Adjusts the brightness of the image.
contrast(%) Adjusts the contrast of the image.
drop-shadow(h-shadow v-shadow blur spread color) Applies a drop shadow effect to the image.
grayscale(%) Converts the image to grayscale. 0% is default and represents the original image. 100% will make the image completely gray.
hue-rotate(deg) Applies a hue rotation on the image. 0 deg is default, and represents the original image. Maximum value is 360deg.
invert(%)Inverts the samples in the image. 0% is default and represents the original image. 100% will make the image completely inverted. Negative values are not allowed.
opacity(%) Sets the opacity level for the image. 0% is transparent. 100% is default and represents the original image. Negative values are not allowed.
saturate(%)Saturates the image. 0% will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% provides super-saturated results. Negative values are not allowed.
sepia(%) Converts the image to sepia. 0% (0) is default and represents the original image. 100% will make the image completely sepia. Note: Negative values are not allowed.

drop-shadow Possible values:

  • 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.
  • spread - Optional. This is the fourth value, and must be in pixels.
  • color: Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).

Technical Details

Item Value
CSS Version CSS3

Change the color of an image to black and white (100% grayscale):

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Test</button><br><br>

<img id="myImg" src="http://java2s.com/resources/c.png" alt="Pineapple" width="300" height="300">

<script>
function myFunction() {//from   ww  w.  j a va  2 s.  c  om
    // Standard syntax
    document.getElementById("myImg").style.filter = "grayscale(100%)";

    // Safari 6.0 - 9.0
    document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
}
</script>

</body>
</html>

Related Tutorials