IconVault logoIconVault
Sign in

CSS Filter Generator - Free Online CSS Tool | IconVault

Build CSS filter chains with live sliders: blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia and drop-shadow. Free.

All tools

CSS Filter Generator

Build filter chains with live sliders

5 of 5 free uses left

Presets

5 of 5 free copies left.

Filter preview

CSS output

filter: none;

About this tool

IconVault's CSS Filter Generator lets you stack filter functions with live sliders and watch the result on a preview image in real time: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow. Copy the generated filter declaration straight into your stylesheet.

Filters run on the GPU in modern browsers, so they are perfect for hover effects, photo treatments and duotone looks without touching an image editor. Free and runs fully in your browser.

Frequently asked questions

Popular searches

css filter generatorcss filters onlinefilter css generatorcss blur generatorgrayscale csscss sepia filtercss brightness filtercss contrast filtercss invert filtercss saturatecss hue rotatecss drop shadow generatordrop-shadow cssfilter blur px csscss image filter toolphoto filter cssinstagram filter csscss filter previewcss filter codebackdrop-filter generatorcss filter playgroundcombine css filterscss opacity filtercss filter copyfree css filter toolcss filter examplescss filters listgrayscale filter css codeblur image csssepia image css codesaturate css imagehue-rotate examplecss filter hover effectapply filter to image csscss filter browser supportfilter grayscale(100%)css filter generator freeonline css filter editorcss visual filter buildercss filter sliderlive css filter previewcss drop-shadow examplecss filter function listhow to use css filterfilter url svg csscss filter nonecss filter contrast brightnesscss filter image hovercss duotone effectcss filter black and white

More tools

Code Playground

Write HTML, CSS & JS with live preview.

JSON Formatter

Beautify, validate & minify JSON.

Base64 Encoder

Encode & decode text and files.

JWT Decoder

Inspect tokens without sending them anywhere.

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →