CSS3 filters| How to use filters and create special visual effects on bitmap images.

CSS3 filters:

Filters were originally part of the SVG specification. However, when their value ended up noticeably evident, W3C started functioning on adding some common filter effects to CSS yet. CSS3 filters area unit pretty powerful and unbelievably trustworthy to use. You’ll be able to use them to blur, brighten or saturate among different things.

You can use CSS3 filters to create special visual effects on bitmap images. The filters support Chrome, Safari and Opera browsers.

Idea about CSS3 filters process :

  • 1. Filters are used to process bitmap images and other content before making it visible on the main page.
  • 2. It sends content through the filter and then the content is visible in the web page. The effect does not use permanent and the original image.
  • 3. Before this feature, developers used photo editors such as Photoshop, Gimp for this purpose. Now you can easily do the work.
  • 4.To convert the image’s color pixels into Gray scale, It creates only an old-looking white-black image.

Use of filter grayscale() property:

You can grayscale your image using filter grayscale () property.


Type the following code into Notepad. Now save filter_grayscale.html or into any name to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<!DOCTYPE html>

<img src="ganesh.jpg" width="450" height="600"/>
<img src="ganesh.jpg" width="450" height="600" class="effects"/>


Display in Browser:

filter grayscale property


This filter steadily converts all the colors in our images to some shade of gray. A value of 0% will have no impact on our images and a value of 100% will turn them fully gray scale.
Negative values are not acceptable.

Use of filter sepia () property:

Using the properties of the color pixels in the image to create a sepia toning effect. Just change the code below into the style tag.

 .effects{-webkit-filter: sepia (1);}

Use of filter saturate() property :

The intensity of the color of the image is imposed by the saturate. The higher the value, the more intense the color will be. Just change the code below into the style tag.

.effects{-webkit-filter: saturate (10);}

Use of filter hue-rotate() property :

filter function hue-rotate () color spectrum from 0 degrees to 360 degrees can be taken only for making excellent effect. Change the Style part of code just below the tag:

.effects{-webkit-filter: hue-rotate (180 deg);}

Use of filter invert() property :

filter function invert () Invert the pixel value of each pixel of the image. It creates a photo-negative image of the image. Change the code below into the style tag.

.effects{-webkit-filter: invert (1);}

Use of filter opacity() property :

These properties are used to determine the level of transparency in the image. The value 0 is completely transparent and value 1 is completely opaque. Change the code below into the style tag.

.effects{-webkit-filter: opacity (0.5);}

Use filter brightness() property:

This property is determined using the brightness of the image. Much like the TV’s brightness control. Change the code below into the style tag.

.effects{-webkit-filter: brightness(2);

Use of filter contrast() property :

The difference between dark and light and color of a pixel of the image is determined. The more the value of the difference will be more. Only change the code below into the style tag.

.effects{-webkit-filter: contrast (3);}

Use of filter blur() property:

This effect is applied to the image to create a soft edge. It basically builds smudged image. That blur image in the viewer’s attention is not done. Just change the code below into the style tag.

.effects{-webkit-filter: blur (2px);}

Leave a Reply

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