CSS filter generator tool

The filter CSS property applies visual effects to an element, such as blur, grayscale or color shift. Commonly, filters are used to modify the appearance of images, backgrounds, and borders. The CSS standard includes several functions that produce predefined effects. An SVG filter can also be referenced with a URL to an SVG filter element.

          
// The following CSS filter should be copied and pasted onto the element where you wish to apply your created effects.

          
// This code was generated from https://www.codeehut.com/tools/css-filter-generator

          
filter: none;
Blur: 0px
Brightness: 100%
Contrast: 100%
Grayscale: 0%
Hue Rotate: 0deg
Invert: 0%
Opacity: 100%
Saturate: 100%
Sepia: 0%

Select some of the presets below:

demo-image

More about CSS filters

How CSS filters can be used

CSS filters are utilized to apply visual effects to text, images, and other page elements. The CSS filter property enables us to modify the rendering of an element prior to its display by applying effects such as color or blur.

Below is the syntax for the CSS filter property.

blur()

It applies the blur effect to the element. If the blur value is not specified, the default value of 0 is applied. The blur() property does not accept percentage values for its parameter. A greater value produces more blur.

brightness()

It is used to set the brightness of an element, as its title indicates. If the brightness is 0%, the resulting image is completely black, whereas 100% represents the original image. It can also accept values greater than 100 percent that yield brighter results.

invert()

It is used to invert the sample values of the element's input. Its 100% value indicates complete inversion, while 0% values leave the input unchanged. Negative numbers are not permitted.

saturate()

It determines the element's saturation level. The element with 0% saturation is completely unsaturated, while the element with 100% saturation is the original. The values exceeding 100% are permitted, resulting in supersaturated results. This property does not support negative values.

contrast()

It adjusts the input's contrast. Its 0% value produces a completely black element, while its 100% value leaves the input unchanged, i.e. represents the original one. Values greater than 100% are permitted, resulting in less contrast.

hue-rotate()

It applies a hue-rotation to the element's input. Its perimeter value specifies the number of degrees surrounding the color circle; the element will be modified accordingly. Its default value is 0, which represents the image's original state. Its maximum value is 360 degrees.

drop-shadow()

It applies drop-shadow to the specified element. It accepts the following values: h-shadow, v-shadow, blur, spread, and color.

opacity()

It applies transparency to the input element. Its value of 0% indicates complete transparency, whereas its value of 100% represents the original element, which is fully opaque.

grayscale()

It transforms the element to black and white. 0% grayscale represents the original, while 100% grayscale represents a completely grayscale element. It converts the colors of the object to 256 shades of gray.

grayscale()

It is used to convert the element to sepia tones. 100% indicates a completely sepia element, whereas 0% indicates the original element.