CSS Filter Generator

Adjust effects like blur and brightness with sliders, preview and generate CSS filter code in real time

UpdatesCSS Filter Generator added: generate by adjusting blur and brightnessView Updates

Features

9 effects with sliders

Preview and CSS code update simultaneously as you adjust

Try with your own images

Display your images in the browser and confirm effects

Compare before and after while pressed

View the image with and without effects side by side

Fine-tune from 8 presets

Start with presets like sepia or vintage and adjust from there

How to use

Select an image

Choose your image with 'Select your image' or try with the built-in sample image

Adjust effects

Select a nearby preset or adjust the strength of each effect with sliders

Compare before and after

Press 'Compare with original' to see the image without effects

Copy the code

Click 'Copy' to paste the filter line into your CSS

Use cases

Text readability over background photos

Slightly blur a background photo to make overlaid headings more readable

Consistent color tone for photos

Unify team page or gallery photos in grayscale or sepia

Determine values with your own photos

Apply to your actual photos to decide on muted or vintage values

Image adjustment for dark mode

Decide on reduced brightness and contrast values so images don't glare on dark backgrounds

Basic knowledge

Filter functions and units

The CSS filter property applies effects to images or elements using functions like blur and sepia, separated by spaces.

px (pixels)：The blur function specifies the blur radius in px. With 4px, colors blend within a 4-pixel radius.
% (percent)：Functions like brightness and sepia specify effect strength as a percentage. For brightness, 100% is the original, and 120% is 20% brighter.
deg (degrees)：The hue-rotate function specifies the angle to rotate colors on the color wheel in degrees. At 180deg, the color shifts to the opposite hue.

Why the order matters

Functions in filter are applied left to right, with each effect building on the previous one. Changing the order can change the appearance. For example, grayscale then sepia leaves a brownish tint, but sepia then grayscale removes it. This tool uses a fixed order, but you can edit the generated CSS to change it.

Difference from backdrop-filter

filter and backdrop-filter use the same functions but apply effects to different targets.

filter：filter applies effects to the element itself (images, text, etc.).
backdrop-filter：backdrop-filter applies effects to what appears behind the element, commonly used for frosted glass effects.