CSS Filter Playground
Build reusable CSS filters with a live before-and-after preview. Reorder effects, try visual presets and copy the exact filter chain for your website.
Build your filter
Effects run from top to bottom. Toggle any effect or move it with the arrow buttons.
Demo artwork is ready. Try a preset or adjust the filters.
CSS changes how an element is displayed; it does not modify the source image. For image file exports, use Image Effects Tool. Preview blur is measured in displayed CSS pixels. Uploaded images are loaded in this browser; third-party advertising scripts can technically access page inputs.
Using CSS Filter Playground
Build reusable CSS filters with live image comparison, adjustable presets, filter ordering, local image previews and CSS or JSON settings exports.
- Try a preset on the included demo or open a PNG, JPG or WebP up to 12 MiB and 6 million pixels.
- Adjust values, toggle filters and use arrow buttons to change their order. Compare the original and filtered preview.
- Choose img, a .class or #id selector, then copy or download the CSS. Save settings JSON to continue later.
Example
Try the included editable example. Adjust values, toggle filters and use arrow buttons to change their order. Compare the original and filtered preview.
Questions & answers
Does this change my image file?
No. It previews CSS display effects and exports CSS code. Use Image Effects Tool when you need to download a modified image.
Why does filter order matter?
Effects apply in order from left to right in CSS, matching top to bottom in the controls. Changing order can change the final colors and transparency.
Can I use my own image?
Yes. PNG, JPG and WebP files up to 12 MiB and 6 million decoded pixels are supported. They load in your browser and are not uploaded by this tool. Advertising scripts can technically access page inputs.
How is blur measured?
Blur is measured in displayed CSS pixels, not source image pixels. The appearance can change when the image is displayed at a different size.
Can I restore a filter later?
Save settings JSON, then load it here. Settings contain values, order and enabled states; your image file and CSS selector are not saved.
Does this support backdrop filters or SVG filters?
This version supports nine numeric CSS filter functions on an image element. Backdrop filters, drop shadows and custom SVG URL filters are outside its scope. Test your exported CSS in your target browsers.
Related tools
A useful next step for your task.
Images & DesignImage Effects ToolEdit still images locally with presets, filters and keyboard or touch before-and-after comparison. Preserve dimensions and download PNG, JPG or…
Developer & DataCSS Gradient GeneratorCreate linear, radial and conic gradients with editable color stops, positions, opacity and presets. Copy CSS or export a PNG and settings JSON.
Developer & DataCSS Box Shadow & Border Radius GeneratorDesign layered inset and outer box shadows, four corner radii, borders and colors with live previews. Copy or download CSS in pixels or rem units.
Images & DesignImage Resizer & ConverterHighly recommendedResize and convert HEIC, JPG, PNG and WebP locally. Set upload size targets, compare previews, and download images or a ZIP. Includes iPhone HEIC…
Help improve this tool
Report a problem or suggest an improvement
Describe the issue without pasting private tool input. Feedback goes to our admin inbox.