CSS Filter Generator
CSS filters change how an element looks — brightness, colour, blur and more — without touching the original image or element. Move the sliders to see it live, then copy the generated CSS into your project.
Live Preview
Before
After
Quick Presets
Move a slider above to generate a filter
Softens the image — useful for backgrounds or frosted-glass effects
Makes the image lighter (>100%) or darker (<100%)
Increases or reduces the difference between light and dark areas
Converts the image to black & white (0% = colour, 100% = full B&W)
Shifts all colours around the colour wheel (0–360°)
Flips all colours to their opposite — 100% gives a negative effect
Controls transparency — 0% is invisible, 100% is fully visible
Intensifies colours (>100%) or mutes them towards grey (<100%)
Adds a warm brownish vintage photo tone
How to use this
filter: rule directly into your stylesheet.