EspañolCSS filter generator for images
Choose a photo or use the sample one and move the controls. The original photo does not change: the effect is applied by the browser.
How to usePhoto effects right in CSS
Available in: 
CSS filter generator for images: what it is for
The CSS filter property applies photo effects right in the browser, without editing the file. Choose a photo and adjust brightness, contrast, saturation, grayscale, sepia, hue, invert, blur, opacity and a shadow that follows the outline (drop-shadow).
Start from one of the presets (black and white, vintage, cool, warm, faded, vivid, night), copy the CSS or download the image with the filter applied. The hover option generates the classic effect of a photo that returns to normal on hover, with a transition that respects people who asked for less motion.
How to use
- Choose the photo or use the sample one.
- Adjust the controls or pick a preset.
- Copy the CSS or download the image.
When to use it
- Black and white team photos.
- Gallery with a hover effect.
- Logos with an outline shadow.
Frequently asked questions
What is the advantage of using filter instead of editing the photo?
The same photo works for several effects, and the change can be animated, such as a black and white photo that turns color on hover. There is no need to save a version for each effect.
Does the order of the filters matter?
Yes. Filters are applied from left to right, and each one works on the result of the previous one. That is why sepia followed by a hue shift gives a different result from the reverse order.
What is the difference between drop-shadow and box-shadow?
box-shadow draws the shadow of the image's rectangle. drop-shadow, which is a filter, follows the outline of what is visible, so it works with PNG and SVG with transparent backgrounds, such as logos and cutouts.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.