CSS Filter Generator

The CSS Filter Generator tool is a demonstration of the filter experimental property that are available within the -webkit browsers of Chrome, Safari and Opera. This means that you will only see the effects that this tool produces in one of the above browsers.

CSS filters allows you to use a number of different functions to add different effects to HTML elements. The best way to see the effects of this property is to apply the filter to an image.

The effects that you can use for CSS filters are:

  • Blur
  • Grayscale
  • Sepia
  • Brightness
  • Contrast
  • Hue-Rotate
  • Invert
  • Saturate
  • Opacity

How To Use Filters

To use the CSS filters you simply need to apply this property to the HTML element with the type function you want to use.

img
{
filter: type(value);
}

Browser Support

As said above this CSS property is an experimental property only for webkit browsers, therefore you will not be able to use this tool on a browser that is not webkit.

To view an updated table of the browsers that support this property you should visit caniuse.com.

Using The CSS Filters Generator

To use this filter generator you start off by selecting an image to use as the HTML element to apply the filters. There is a default image to start with or you can paste in the URL of your own image.

Click on the filters tab and you will see a dropdown of the filters you can apply. Select the filter that you want to use, this will then display a input box with a slider where you can select a value to give the filter.

Each filter can have a different type of value, some filters accept percentage values, some pixel values and other filters accept degree values.

As you select your filter and change the value you will see the filter applied to the preview image at the top of the page.

To get the code for the filter click on the HTML & CSS tab and copy the CSS into your own website.

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!