CSS Filter Generator

How to Use the CSS Filter Generator

The CSS Filter Generator lets you adjust blur, brightness, contrast, saturation, hue, and other effects while checking the result in a real-time preview.

1. Choose a preview image

Use the default sample image, or choose an image from your device to preview the filter effects. (The selected image is used only in your browser and is not sent to or stored on a server.)

Remove the selected image to return to the sample image.

2. Adjust each filter function

Change the basic filter functions using their range sliders or number inputs. Every change is reflected in the preview and generated code immediately.

This generator supports the following filter functions:

• blur()
• brightness()
• contrast()
• saturate()
• grayscale()
• sepia()
• hue-rotate()
• invert()
• opacity()
• drop-shadow()

Use an item’s “Clear” button to return only that filter function to its neutral value. Unused filter functions are automatically omitted from the generated CSS.

Configuring drop-shadow()

Turn drop-shadow() on to set its X and Y positions, blur, opacity, and color.

Use “Add Shadow” to create multiple shadows. When more than one shadow is present, use the arrow button between two items to swap their order.

Select a shadow heading to collapse or expand its settings. Use the × button on the right to remove a shadow. The delete button is hidden when only one shadow remains, so turn drop-shadow() off to remove the shadow completely.

3. Change the filter order

When multiple types of filter are active, “Filter Order” appears. Drag and drop the items to reorder them, or focus a drag handle and use the Up and Down arrow keys.

CSS filter functions are applied in the order in which they are written, so the same values may produce a different appearance when their order changes.

filter: brightness(120%) contrast(140%);

filter: contrast(140%) brightness(120%);

4. Compare the preview

The preview updates in real time. Switch between “After” and “Before” above the preview to compare the filtered result with the original image.

5. Copy the generated CSS

When you are finished, use the “Copy” button to copy the generated filter declaration. If every filter function is at its initial value, the generator outputs filter: none;.

Use “Reset” to restore the filter settings, filter order, and drop-shadow settings to their initial state. A selected preview image is retained after the reset.

CSS Filter Guide

filter is a CSS property that applies visual effects such as blur, brightness, contrast, saturation, and hue rotation to an element.

For example:

filter: brightness(120%) contrast(110%) saturate(130%);

makes the target brighter while increasing its contrast and saturation.

The property is not limited to images. It can also be applied to HTML elements containing text, backgrounds, and other content.

CSS Filter Functions

blur()

blur() blurs an element. Larger values create a stronger blur, while 0px applies no blur.

filter: blur(4px);

brightness()

brightness() adjusts brightness. 100% leaves the input unchanged; lower values darken it and higher values brighten it.

filter: brightness(120%);

contrast()

contrast() adjusts the difference between light and dark areas. 100% leaves the input unchanged, while higher values increase contrast.

filter: contrast(130%);

saturate()

saturate() adjusts color intensity. 100% is the original saturation, 0% removes saturation, and values above 100% make colors more vivid.

filter: saturate(150%);

grayscale()

grayscale() converts an element to grayscale. 0% leaves it unchanged, while 100% produces complete grayscale.

filter: grayscale(100%);

sepia()

sepia() adds a sepia tone. 0% leaves the input unchanged, and increasing the value strengthens the effect.

filter: sepia(100%);

hue-rotate()

hue-rotate() rotates colors around the color wheel. 0deg and 360deg represent the original hue.

filter: hue-rotate(90deg);

invert()

invert() inverts colors. 0% leaves the input unchanged, while 100% fully inverts it.

filter: invert(100%);

opacity()

opacity() controls opacity within a Filter chain. 100% is fully opaque, and lower values make the result transparent.

filter: opacity(60%);

If you only need to change the opacity of an entire element, the regular opacity property may also be appropriate.

drop-shadow()

drop-shadow() adds a shadow that follows the visible shape of an element. This generator can combine multiple functions.

filter: drop-shadow(0 8px 8px rgb(0 0 0 / 30%));

filter: drop-shadow(0 8px 8px rgb(0 0 0 / 30%))
  drop-shadow(8px 16px 12px rgb(0 0 0 / 20%));

Why Filter Order Changes the Result

Filter functions are applied from left to right, with each function processing the result of the previous one.

For example:

filter: grayscale(100%) brightness(130%);

first converts the input to grayscale and then increases its brightness. In contrast:

filter: brightness(130%) grayscale(100%);

increases brightness before converting the result to grayscale.

The difference may be subtle for some combinations, but checking the order is important when combining several effects.

filter vs. backdrop-filter

filter and backdrop-filter affect different content.

filter applies an effect to the specified element itself:

.element {
  filter: blur(4px);
}

backdrop-filter applies an effect to content behind the element:

.element {
  backdrop-filter: blur(10px);
}

drop-shadow() vs. box-shadow

Both can add shadows, but they use different shapes as their basis.

box-shadow generally adds a shadow around an element’s box.

drop-shadow() considers transparent areas and can follow the visible shape of an image or SVG.

For this reason, drop-shadow() can be a better choice for a transparent PNG or SVG.

FAQ