Image Filter
Apply filters to images in your browser — grayscale, sepia, invert, and brightness. Download the result as PNG. No upload — files stay on your device.
Drop an image here or click to browse
PNG · JPG · WebP · GIF · BMP
Related Tools
Base64 → Image
Convert Base64 strings or data URIs back to images instantly. PNG, JPG, WebP, GIF — auto-detects format. No upload required.
Image → Base64
Convert images to Base64 data URIs instantly. Supports PNG, JPG, GIF, WebP, SVG. Files never leave your browser.
Image Compare
Compare two images with a draggable before/after slider in your browser. No upload required.
Image filters modify the visual appearance of a photograph by transforming pixel color values according to mathematical rules. Basic filters include grayscale (converting color information to luminance values), sepia (applying a warm brownish tone that mimics aged photographs), invert (producing a photographic negative by subtracting each channel value from 255), and brightness adjustment (scaling all channel values by a multiplier). These operations are composable — multiple filters can be stacked to produce combined effects.
The CSS filter property (grayscale(), sepia(), invert(), brightness(), contrast(), saturate(), blur()) applies these transformations in the browser's rendering pipeline without modifying the underlying image data. For permanent export of filtered images, the filter must be applied via Canvas: the image is drawn into an offscreen canvas with the CSS filter active, and the resulting pixel data is read back via toBlob() for download. This approach keeps all pixel manipulation client-side.
This tool applies grayscale, sepia, invert, and brightness filters to uploaded images using the CSS filter property on a Canvas element. Filters are toggled with buttons and stack in order; the brightness filter includes a continuous slider from 0% to 200%. A live preview updates with every change. The Download PNG button exports the current state as a PNG file — lossless, so the filter result is preserved exactly as displayed without additional compression artifacts.
Common Use Cases
Creating grayscale and vintage-style photos for design work
Graphic designers, bloggers, and social media creators convert color photos to grayscale or sepia tone for visual consistency in layouts where multiple images need a unified treatment. A blog post with a mix of differently colored photos can be given a cohesive look by converting all images to grayscale. Sepia tone creates a vintage or nostalgic aesthetic without requiring photo editing software like Photoshop or Lightroom.
Producing negative images for artistic or technical purposes
The invert filter produces a photographic negative — the classic appearance of analog film negatives. This effect is used in artistic photography, in UI design for dark/light mode image inversions, and in document scanning workflows where printed text on white paper becomes white text on black for easier OCR processing or contrast adjustment. The inverted image can be downloaded and used directly in design tools.
Adjusting brightness to fix poorly exposed images
Photos taken in challenging lighting conditions — backlit subjects, overcast skies, indoor low-light scenes — often need brightness correction before use in presentations, websites, or social media. The brightness slider allows quick exposure adjustment without opening a full photo editor. Increasing brightness by 130–150% rescues underexposed subjects; reducing to 70–80% tones down overexposed backgrounds.
How to Use
- Drop or click the upload area to open an image file.
- Select one or more filters using the toggle buttons.
- For Brightness, drag the slider to adjust the intensity.
- Filters stack — you can combine Grayscale and Brightness simultaneously.
- Preview updates in real time; click Download PNG to save the result.
Available Filters
- Grayscale — Removes all color, converting to shades of grey
- Sepia — Warm brownish tone, mimics vintage photography
- Invert — Flips all pixel values (creates a negative image)
- Brightness — Adjusts overall luminance; 100% is original, 200% is fully bright
How Filters Work
Filters are applied using the browser's CSS filter property on a canvas element. All processing happens client-side — no image data leaves your device.