CSS Filter Generator
This CSS image filter generator is a online tool that allows users to easily create and apply custom image filters to their photographs or graphics using CSS. This generator provides a user-friendly interface where you can adjust various parameters like blur, brightness, contrast, saturation, hue, and more. Users can visually preview the effects in real-time and fine-tune them to achieve their desired visual aesthetics. Once satisfied with the filter settings, the generator generates the corresponding CSS code, which can be applied to HTML elements containing images. This tool is handy for web designers and developers looking to enhance the visual appeal of their website content without relying on external image editing software.
View a few image filters in action with code.
1977
Aden
Brooklyn
Earlybird
Gingham
Hudson
Inkwell
Lofi
Reyes
Toaster
Moon
Willow
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.