CSS Filter Generator | Easy Code Tools

CSS Properties

Blur Radius: 0px

Brightness: 100%

Contrast: 100%

Grayscale: 0%

Hue Rotate: 0deg

Invert: 0%

Opacity: 100%

Saturate: 100%

Sepia: 0%

Filter Preview

Auto Prefix

CSS Code

Filter Presets

1977

Aden

Brooklyn

Earlybird

Gingham

Hudson

Inkwell

Lofi

Reyes

Toaster

Moon

Willow

This generator will help you visualize images with different css filters applied to them. Our CSS Image Filter Generator will also generate the necessary css code for you to use on your images. With this generator, we have also provided a selection of presets that you can use, with thanks to CSSgram for the preset codes.

View a few image filters in action with code.

About CSS Filters

Website images are powerful tools for creating atmosphere and engaging users, which is why there are so many of them on the web.

Designers have many advanced tools for working with images: various filters, masks and other effects. But often the developer has to do without all of this wealth. For example, performance considerations require it. If you have a black and white picture that should turn color on hover, it is unwise to use two different files.

Fortunately, CSS provides us with ample opportunities for image manipulation. Many graphic effects can be implemented in code - for example, filters, which we'll have a look at now.

To create filters, we use the CSS filter property that can work with several filtering functions. Each of these functions has its own effect. It is also acceptable to use several filters at once on one image, and the final result will depend on their sequence.

Blur

Blurring effect makes the image blurry. For this, a Gaussian blur algorithm is used. Can be used for "censoring" or for an unimportant background image to distract attention.

The blur() function in CSS takes only one argument, the number of pixels. The larger it is, the stronger the blur. The default is 0 (no blur at all).

No Filter

Blur 5px

Blur 10px

The first image in the example is, as always, without a filter, the second has a medium blur (5px), and the last is very blurry (10px), so that the picture is almost impossible to distinguish.

Brightness

The brightness() function filter allows you to control the brightness level of an image.

We syntax for brightness() is a percentage value or a decimal fraction. Initially, each image is 100% brightness. It can be either decreased (down to 0%) or increased.

No Filter

Brightness 50%

Brightness 150%

The second picture in the example has the brightness reduced (filter: brightness(50%)), and the third one - increased to 150%. The lower the value, the darker the image, and vice versa.

Grayscale

One of the most popular filters that helps you create a black and white photo from a color one.

The grayscale() function accepts a percentage value of "grayness", where 0% means that the picture will not be changed, but 100% corresponds to a completely black and white image. You can also use fractions of one instead of percentages (0 = 0%, 0.5 = 50%, 1 = 100%).

No Filter

Grayscale 50%

Grayscale 100%

In this example, the first photo is completely without a filter. The second has a property applied filter: grayscale(50%) and it is 50% black and white. The third is completely black and white due to the property filter: grayscale(100%).

Hue Rotate

The hue rotate parameter corresponds to the angle on the color wheel. It is expressed in degrees or radians and ranges from 0deg to 360deg. You can also specify a smaller (negative) or larger value, but it will be converted to a range 0-360(in degrees) anyway.

Each color in the picture corresponds to a specific angle on the color wheel. For example, red is 0 (or 360) degrees, blue is 90 degrees, yellow is 120 degrees and green is 180 degrees.

When using the filter hue-rotate, each of the original colors will be shifted by the specified angle. That is, when hue-rotate(90deg), red will turn orange, yellow - blue-green, and green - blue (values are approximate).

No Filter

Hue-Rotate 90deg

Hue-Rotate 180deg

The original image is presented in close to each other yellow-green tones, so the hue shift is uniform throughout the image. Rotating 90deg in the first image shifts the overall tone to green, 180deg to blue, and 270deg (-90deg is the same as 270) to red.

Invert

Another filter for working with images from CSS is inverting colors (creating a negative).

The invert() function accepts a percentage from 0% to 100% (or 0 to 1). 0% is the original image, 100% is full negative.

No Filter

Invert 75%

Invert 100%

The second image in the example is 75% inverted, and the third is full negative.

Saturate

Image saturation is the degree of intensity of the colors that make it up. The higher the saturation value, the more “colorful” the picture.

You can control the saturation in CSS using the saturate() function whose syntax is similar to brightness() and contrast().

No Filter

Saturate 20%

Saturate 200%

The second picture in the example looks dull compared to the original (filter: saturate(20%)), and the third one looks more colorful (200% saturation).

Sepia

Another popular filter is sepia. It looks like a grayscale, only it paints the picture not in gray, but in red-brown tones. This gives a very pleasant "aging" effect.

The syntax and operation of the sepia() function exactly the same as that of grayscale().

No Filter

Sepia 50%

Sepia 100%

An example demonstrates how this filter works. The first image is the original without filters, the second has a property filter: sepia(50%), and the third is filter: sepia(100%).

Conclusion

CSS filters allow you to create wonderful visuals with images without hurting your site's performance.

The article covered 8 filtering functions, but in fact there are slightly more of them. There is also: opacity() that controls transparency, and drop-shadow() that creates a shadow. They are not analyzed in detail, since they do not interact directly with the colors of the image.