Free tools
English
CSS filter generator
CSS filter generator — choose your inputs and copy or save the result. Input guide: Blur (px), Brightness (%), Contrast (%), Grayscale (%). No account needed.
No account needed
Loading tool…
How to use
- 1Input guide: Blur (px), Brightness (%), Contrast (%), Grayscale (%).
- 2Run the tool and review the result.
- 3Copy result / Save result file.
Good to know
Check input ranges and units. Results depend on your inputs and your browser.
Ads may process connection data. Personalization follows your privacy choices. Privacy (English)
Worked input and output example
These results come from this tool’s actual engine using the sample values below, not your personal input or saved work. Load the example in the tool to inspect the same inputs.
Example input
| Field | Value |
|---|---|
| Blur (px) | 0 |
| Brightness (%) | 100 |
| Contrast (%) | 100 |
| Grayscale (%) | 0 |
Example result
filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%);
Input constraints
These are the actual input validation limits; they are not a guarantee that every accepted value is realistic or that a model applies to your situation.
- Blur (px): Accepted range: 0 ≤ x ≤ 100
- Brightness (%): Accepted range: 0 ≤ x ≤ 300
- Contrast (%): Accepted range: 0 ≤ x ≤ 300
- Grayscale (%): Accepted range: 0 ≤ x ≤ 100