Image Filters

This image filter tool combines two rendering techniques. CSS Canvas filters handle brightness, contrast, saturation, hue rotation, and blur — these are hardware-accelerated and update in real time as you drag the sliders. The sharpen filter uses a convolution kernel applied directly to pixel data via getImageData, which is more computationally intensive but produces true edge-aware sharpening that CSS filters cannot replicate. All eight presets — grayscale, sepia, invert, warm, cool, vintage, dramatic, and soft — are specific combinations of these six parameters. After filtering, you can crop the result with the Image Cropper or compress it with the Image Compressor.

Brightness scales all pixel values uniformly — increasing it makes the entire image lighter, decreasing it makes it darker. Contrast adjusts the difference between the lightest and darkest tones: high contrast creates punchier images with deeper blacks and brighter whites, while low contrast produces a flatter, more muted look. Saturation controls color intensity: 0% produces a grayscale image, 100% is the original, and values above 100% make colors more vivid. These three adjustments form the foundation of photo editing and are often the first corrections applied to any image. For a detailed analysis of an image's tonal range before editing, check the Image Histogram Analyzer.

Grayscale removes all color by setting saturation to zero. Sepia adds a warm brownish tone reminiscent of antique photographs by reducing saturation and rotating the hue. Vintage combines lower contrast with muted saturation for a faded film look. Warm and cool presets shift the hue toward orange and blue respectively, mimicking tungsten and daylight color temperatures. Dramatic boosts contrast and saturation for bold, impactful images. Soft adds slight blur and lifts brightness for a dreamy, diffused portrait look. Every preset is a starting point — tweak the sliders to customize. To extract the color palette from your filtered image, use the Color Palette Extractor.

Blur applies Gaussian smoothing to soften the image — useful for reducing noise, creating background-like effects, or softening skin in portraits. Sharpen does the opposite: it enhances edge detail by applying an unsharp-mask convolution kernel, making textures and outlines crisper. The before/after slider lets you drag a divider across the image to compare the filtered version (left) with the original (right) in real time. This makes it easy to judge whether an adjustment improves the image or goes too far. For pixel-level comparison between two different images, try the Similarity Scanner. Download preserves full original resolution. Explore all 88 image tools. Read our image filters guide for tips, examples, and best practices.