Apply filters and adjustments in real time — grayscale, sepia, blur, sharpen, brightness, contrast, and more.
Supports JPG, PNG, WEBP — adjustments apply in real time
Apply CSS-based image filters and adjustments in real time using the HTML5 Canvas API. Adjust brightness, contrast, saturation, blur, hue rotation, and more with live preview. Choose from preset filters (grayscale, sepia, warm, cool, vivid, fade) or fine-tune every slider manually. Download the result as JPG.
Grayscale converts each pixel to a shade of gray based on a weighted average of its red, green, and blue channels. The human eye is more sensitive to green, so green is weighted more heavily (roughly 59%), red at 30%, and blue at 11% in standard luminance conversion.
Brightness adds or subtracts a fixed value from all pixel channels uniformly, which can wash out highlights. Exposure (as used in photo editors) is a multiplicative adjustment that better mirrors how a camera aperture works. This tool uses the CSS brightness filter, which is a multiplicative adjustment.
Yes — the canvas preserves the alpha channel. Download as PNG to keep transparency. Downloading as JPG will fill the transparent areas with white.