CSS Filter Generator
Adjust an image the way a photo editor would, in pure CSS. Move the sliders for blur, brightness, contrast, saturation and the other filter functions, try the ready-made looks, and copy a filter declaration that leaves the image file untouched.
- Runs in your browser
- No sign-up
- Free to use
Filters
Drop shadow
How to use CSS Filter Generator
- Use the built-in sample or load one of your own images for the preview.
- Move the sliders, or start from a preset such as Vintage or Black & white.
- Optionally add a drop shadow that follows the shape of the image.
- Copy the CSS and apply the class to your image or element.
CSS Filter Generator features
Nine filter functions
blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert and opacity.
Shape-aware drop shadow
drop-shadow follows transparent areas, unlike box-shadow.
Photo-style presets
Vintage, black and white, dramatic, faded, warm and cool.
Your own image
Preview on a local picture; it is not uploaded anywhere.
Minimal output
Only functions that differ from their neutral value are written.
Non-destructive
The original image file is never changed; the effect lives in the style sheet.
When to use CSS Filter Generator
- Giving a set of photos from different sources a consistent look.
- Dimming or blurring a background image behind text.
- Greyed-out states for disabled items or partner logos, with colour on hover.
- Shadows for transparent PNGs and SVG icons.
CSS Filter Generator FAQ
What does the CSS filter property do?
It applies graphical effects to an element after it has been drawn, much like adjustment layers in an image editor. It works on anything, images, text, whole sections, and affects the element together with all of its content.
Does the order of filter functions matter?
Yes. Each function works on the result of the previous one. Converting to grayscale and then applying sepia gives a classic toned photo; sepia followed by grayscale ends as plain grey. The generator writes the functions in a fixed, sensible order.
What is the difference between drop-shadow and box-shadow?
box-shadow is drawn around the rectangular box of the element. drop-shadow follows the visible pixels, so a transparent PNG or an SVG icon gets a shadow in its real shape. It has no spread value and no inset option.
What is the difference between filter and backdrop-filter?
filter changes the element itself. backdrop-filter changes whatever lies behind the element, as seen through it, which is how frosted-glass panels are made.
Do filters affect performance?
Most functions are cheap. Blur and drop-shadow are the expensive ones, particularly on large elements or when animated. For a hover effect, changing brightness or saturation is light; animating a large blur can stutter on phones.
How do I remove a filter on hover?
Define the filtered state on the element and filter: none in its :hover rule, with a transition on filter for a smooth change. A common use is logos shown in grayscale that regain their colours on hover.
Image adjustments in the style sheet
Before CSS filters, giving a set of images a uniform treatment meant editing each file. With the filter property, the adjustment becomes a line in the style sheet. The original files stay as they are, the same class can be applied to any image, and the look can be changed site-wide by editing one rule. Filters also respond to interaction, so an image can be muted at rest and vivid on hover without a second file.
The functions map closely to familiar photo controls. brightness and contrast set the overall tone. saturate strengthens or weakens colour, with 0% giving a greyscale picture. grayscale and sepia are dedicated toning functions with their own strength. hue-rotate shifts every colour around the colour wheel, which changes the mood of a picture and, on flat graphics, recolours them entirely. invert produces a negative. blur softens, and is the standard way to defocus a background.
Combining functions is where recognisable looks come from. A vintage look is partial sepia with slightly reduced contrast and saturation. A dramatic look raises contrast and saturation and lowers brightness a little. A faded, airy look does the opposite. The presets are short recipes of this kind and make good starting points to adjust by eye.
Two practical notes. A filter applies to the whole element including its children, so blurring a container blurs the text inside it; to affect only a background, put the image on a separate layer or pseudo-element. And blurred images show transparent edges where the blur reaches beyond the picture, which is usually hidden by scaling the image up slightly or clipping it with overflow: hidden on the parent.