Tune an image while preserving its meaning
CSS filters change the rendered appearance of an image or element. Brightness and contrast can make a set of project photos feel consistent; grayscale can create a deliberate editorial style. Filters affect the entire rendered element, so put text outside the filtered image when it should remain unchanged.
How to use this tool
- Start from the original image and adjust one setting at a time. Compare brightness before adding saturation or contrast.
- Combine filters in the order you intend to apply them. The resulting appearance can change when the function order changes.
- Copy the filter property onto the image selector. Compare the result against the original and test on a small screen.
These settings slightly darken the image, strengthen contrast, and reduce saturation. They do not reduce the file size or change the source image. Optimize the asset separately if image download performance is the problem.
Read the reference documentation ↗