CSS filter generator with live preview
Generate the CSS filter property (blur, brightness, contrast, sepia, hue…) with a live preview.
🎨
🔒 100% client-side — no data sent
Compose the CSS filter property with sliders — blur, brightness, contrast, saturation, grayscale, sepia, invert, hue-rotate and opacity — and see the result live on a preview. Then copy the ready-to-use CSS. Everything runs in your browser.
What is it for?
- ▸ Darken or lighten an image with CSS
- ▸ Create a sepia or black-and-white hover effect
- ▸ Dial in the right hue rotation
- ▸ Tune blur and contrast without an image editor
FAQ
What can I apply this filter to?
The filter property applies to any HTML element (image, div, text…) and its descendants.
What is the difference between filter and backdrop-filter?
filter affects the element itself; backdrop-filter affects what is behind it (frosted-glass effect).
Is it supported in all browsers?
Yes, the filter property is supported by all modern browsers.
Can I combine several filters?
Yes, they stack in order; the tool only lists the ones whose value differs from the default.
Related tools
Aspect ratio · calculator Calculate an aspect ratio (16:9…) and derive a missing proportional dimension. Barcode generator Generate a barcode (EAN-13, Code128, UPC) from a value, downloadable, in your browser. Base64 → image Decode a data URI or Base64 into a viewable, downloadable image, in your browser. CSS border-radius · generator Create CSS rounded corners (border-radius) with a live preview and copy-ready code. CSS box-shadow · generator Generate a CSS box-shadow with a live preview and copy-ready code. Green screen remover Make a background color (green/blue screen) transparent and export a PNG, in your browser.