CSS Filter & Color Matrix Generator
Apply nine CSS image filters, upload your own picture, compare before and after and experiment with editable SVG color matrices.
Controls
Live preview
Generated code
/* Your CSS will appear here */CSS Filter & Color Matrix Generator: how it works
Upload an image or use the built-in sample, adjust the sliders, and hold the Compare button to temporarily show the original. The generator updates the preview and CSS output immediately, so you can test different choices before committing them to your project.
Popular ways to use this CSS generator
- Create monochrome or vintage imagery with grayscale and sepia.
- Adjust contrast, saturation, brightness, hue and blur.
- Test custom 4×5 color matrices on your uploaded image.
For more ideas, try the related tools below. All controls work right in your browser, and the generated code can be included in your own stylesheet.
About css filter CSS.
Can multiple CSS filters be combined?
Yes. CSS filter functions can be chained in one filter declaration, and their order affects the final result.
What is an SVG color matrix?
A color matrix transforms RGBA pixel channels using 20 coefficients arranged in four rows and five columns.
Can I compare my original image?
Yes. Hold the Compare original button to temporarily remove the current filter from the live preview.
What CSS filter functions can I use on an image?
Common CSS filter functions include blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, and drop-shadow.
What is the difference between filter: blur() and backdrop-filter: blur()?
filter: blur() blurs the element itself. backdrop-filter: blur() blurs the backdrop visible behind a translucent element.
Can I combine multiple CSS filters?
Yes. Put filter functions in sequence, such as filter: contrast(1.2) saturate(1.3);. The order can affect the final appearance.
Does applying a CSS filter change the original image file?
No. CSS filters affect browser rendering, not the stored image pixels. Copy the generated CSS to reproduce the effect on your website.