CSS filter generator
Adjust the values to get a ready filter line; functions left at their neutral value are dropped to keep the code short.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter blur, brightness, contrast, grayscale, hue rotate and invert.
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
filter: blur(px) brightness(%) contrast(%) grayscale(%) hue-rotate(deg) invert(%) opacity(%) saturate(%) sepia(%). Neutral values: blur 0, brightness, contrast, opacity and saturate at 100%, the rest 0. If all are neutral the value is none.
Example
Inputs: Blur = 0 px, Brightness = 110 %, Contrast = 120 %, Grayscale = 0 %, Hue rotate = 0 deg. Result: CSS code: filter: brightness(110%) contrast(120%);; Functions used: 2.
Limits and caveats
- The function order is fixed here; in CSS order can change the result, so edit it by hand if needed.
- Heavy blur on large images or backdrop-filter can slow pages on phones.
Questions about this tool
How do I make an image black and white?
Set grayscale to 100% and the code becomes filter: grayscale(100%).
What is the difference between filter and backdrop-filter?
filter affects the element itself, while backdrop-filter affects what is behind it, which is how the frosted glass effect works.
Is opacity() in filter the same as the opacity property?
The look is close, but opacity() inside filter combines with the other filters and may be hardware accelerated.