CSS Filter Generator

Filters

Blur0px

Brightness1

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

Image

Using the CSS Filter Generator

This tool provides a live preview for applying and layering CSS filter functions on an image. You can quickly create photo effects like vintage looks, color adjustments, or blurs without needing a graphics editor.

Use the Sliders. Adjust the sliders for each filter property to see its effect on the image in real-time.
Upload Your Own Image. Click the "Upload Image" button to test the filters on your own picture for a more accurate preview.
Reset Everything. Use the "Reset All" button at any time to return all filters to their default values and restore the original sample image.
Copy the CSS. The generated code includes the combined filter property with all your adjusted values, ready to be applied to any element on your site.

Understanding the `filter` Property

The CSS filter property lets you apply graphical effects like blurring or color shifting to an element. It is most commonly used on images, but it can be applied to any element, including text and divs.

Layering Multiple Filters

You can apply multiple filter functions to an element at the same time. Simply list them one after another, separated by a space. The browser will apply them in the order they are listed.

.my-image {
  filter: grayscale(80%) sepia(50%) blur(2px);
}

Common Filter Functions

Function	Description & Values
`blur()`	Applies a Gaussian blur. Value is a length, e.g., `5px`. A value of `0` leaves the image unchanged.
`brightness()`	Adjusts the brightness. `0` is completely black, `1` is unchanged, and values over `1` are brighter.
`contrast()`	Adjusts the contrast. `0%` is completely gray, `100%` is unchanged, and values over `100%` create more contrast.
`grayscale()`	Converts the element to grayscale. `0%` is unchanged, while `100%` is completely grayscale.
`hue-rotate()`	Shifts the colors around the color wheel. The value is an angle, e.g., `90deg`. A value of `0deg` or `360deg` leaves colors unchanged.
`invert()`	Inverts the colors. `0%` is unchanged, while `100%` is a full color negative.
`opacity()`	Applies transparency. `100%` is fully opaque (unchanged), and `0%` is completely transparent.
`saturate()`	Adjusts the color saturation. `0%` is completely unsaturated, `100%` is unchanged, and values over `100%` are super-saturated.
`sepia()`	Converts the element to a sepia tone. `0%` is unchanged, while `100%` is fully sepia.

Use Cases

Here are some common use cases for CSS filters:

Image Galleries. Create interesting hover effects where an image becomes colored or sharpens when the user mouses over it.
UI States. Use filters to visually indicate disabled or inactive states, for example, by applying grayscale() and a lower brightness() to a button.
Backdrop-filter. A related property, backdrop-filter, applies filters to the area behind an element. This is the key property used to create glassmorphism effects.

A Word on Performance

CSS filters are hardware-accelerated in modern browsers, making them quite performant. However, applying many complex filters, especially blur(), over large areas can still impact performance on less powerful devices.