CSS Properties
0px
100%
100%
0%
0deg
0%
100%
100%
0%

Filter Preview

CSS Filter Generator
CSS Code
Filter Presets
CSS Filter Generator

1977

CSS Filter Generator

Aden

CSS Filter Generator

Brooklyn

CSS Filter Generator

Earlybird

CSS Filter Generator

Gingham

CSS Filter Generator

Hudson

CSS Filter Generator

Inkwell

CSS Filter Generator

Lofi

CSS Filter Generator

Reyes

CSS Filter Generator

Toaster

CSS Filter Generator

Moon

CSS Filter Generator

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).

CSS Filter Generator

No Filter

CSS Filter Generator

Blur 5px

CSS Filter Generator

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.

CSS Filter Generator

No Filter

CSS Filter Generator

Brightness 50%

CSS Filter Generator

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%).

CSS Filter Generator

No Filter

CSS Filter Generator

Grayscale 50%

CSS Filter Generator

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).

CSS Filter Generator

No Filter

CSS Filter Generator

Hue-Rotate 90deg

CSS Filter Generator

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.

CSS Filter Generator

No Filter

CSS Filter Generator

Invert 75%

CSS Filter Generator

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().

CSS Filter Generator

No Filter

CSS Filter Generator

Saturate 20%

CSS Filter Generator

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().

CSS Filter Generator

No Filter

CSS Filter Generator

Sepia 50%

CSS Filter Generator

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.