Apply filters and adjustments to your photos
Welcome to our Photo Filter tool, a powerful yet simple way to enhance and transform your photos directly in the browser. Whether you want to add a vintage film look, boost the vibrancy of a landscape shot, or convert a portrait to dramatic black and white, this tool gives you complete control over 11 filter adjustments plus 16 one-click presets — all without uploading a single byte to any server. Photo filters work by mathematically transforming the color values of every pixel in your image. When you increase brightness, each pixel's RGB values are multiplied by a factor greater than one, making the image lighter. Contrast adjustments expand or compress the tonal range around the midpoint, making darks darker and lights lighter (or flattening everything toward middle gray). Saturation controls the intensity of colors — pushing it high creates vivid, punchy images, while pulling it to zero removes all color information, producing a grayscale result. Our tool uses the browser's native CSS filter engine for real-time preview, which is GPU-accelerated and updates instantly as you move any slider. This means zero lag even on large images. When you download your result, we render the final image at full native resolution onto an HTML5 Canvas element, applying all your filter adjustments pixel by pixel. The result is a clean, watermark-free image file in your choice of PNG, JPEG, or WebP format. Beyond basic adjustments, we offer features that most competitors lack. Our side-by-side split view lets you drag a divider across the image to compare the original and filtered versions simultaneously — much more useful than a simple toggle. The preset gallery renders thumbnail previews on your actual uploaded image, not generic stock photos, so you can instantly see how each look will affect your specific photo. An intensity slider lets you blend any preset with the original at any strength from 0 to 100 percent, giving you thousands of possible combinations. For developers and designers, our CSS Code panel displays the exact CSS filter property string equivalent of your current adjustments. Copy it with one click and paste it directly into your stylesheet. For advanced users, we include sharpness control (using an unsharp mask convolution kernel) and a vignette effect (darkened oval edges), both of which are baked into the download at full resolution. The tool includes full undo/redo history (up to 10 states), keyboard shortcuts (hold Space to preview the original), clipboard paste support (Ctrl+V to load a screenshot), and shareable URL encoding so you can bookmark or share your exact filter settings without any server infrastructure. Every operation happens in your browser — your images never leave your device. Whether you are a social media creator looking for the perfect Instagram aesthetic, a blogger wanting to maintain a consistent visual style, a student editing photos for a school project, or simply someone who wants to make their vacation photos pop, our Photo Filter tool is the fastest, most private way to get professional-looking results without installing any software.
Understanding Photo Filters
What Are Photo Filters?
Photo filters are mathematical transformations applied to the color values of every pixel in a digital image. Each pixel in a digital photo is stored as a combination of red, green, and blue (RGB) values, typically ranging from 0 to 255. Filters modify these values using formulas — for example, a brightness filter multiplies each channel value by a constant, while a sepia filter remaps colors through a matrix that shifts blues toward warm browns. Modern browsers implement these transformations using the CSS filter specification, which leverages GPU hardware acceleration for real-time performance. The term 'filter' in photography dates back to physical glass or gelatin filters placed in front of camera lenses to alter light before it reached the film — colored filters for mood, polarizers for glare reduction, and diffusion filters for soft focus. Digital filters replicate and extend these effects in software, offering far more flexibility and the ability to combine multiple effects simultaneously.
How Do CSS Filters Work?
CSS filters are a W3C specification that allows browsers to apply visual effects to HTML elements using GPU-accelerated compositing. When you set a CSS filter property like 'filter: brightness(1.5) contrast(1.2)', the browser processes each pixel through a series of mathematical operations in a specific order. Brightness multiplies each RGB channel by the given factor. Contrast adjusts the distance of each channel value from the 128 midpoint. Saturation manipulates the relationship between the luminance and chrominance components. Hue rotation shifts the color angle in the HSL color space. Blur applies a Gaussian convolution kernel that averages neighboring pixel values. Grayscale and sepia apply color matrix transformations. Multiple filters compose left-to-right, meaning the order matters — applying brightness before contrast produces different results than the reverse. Our tool applies filters in the industry-standard order: brightness, contrast, saturate, hue-rotate, blur, grayscale, sepia, invert, opacity.
What Are Photo Filter Presets?
Photo filter presets are predefined combinations of individual filter adjustments that produce a specific visual style or mood. They became massively popular through Instagram, which launched in 2010 with its signature set of one-tap filters like 'Valencia', 'X-Pro II', and 'Nashville'. These presets democratized photo editing by giving everyone access to professional-looking results without any technical knowledge. Each preset in our tool is defined as a specific combination of brightness, contrast, saturation, hue rotation, and other parameters. For example, the 'Vintage' preset combines increased brightness (105%), higher contrast (110%), reduced saturation (80%), and a touch of sepia (30%) to mimic the look of aged film photographs. Our preset intensity slider lets you control how strongly the preset is applied, blending between the original image and the full preset effect at any percentage.
Understanding Image Export Formats
When downloading your filtered image, the choice of format affects file size, quality, and compatibility. PNG (Portable Network Graphics) uses lossless compression — the image quality is identical to what you see on screen, but files are larger. PNG also supports transparency (alpha channel). JPEG (Joint Photographic Experts Group) uses lossy compression controlled by a quality slider — at 92% quality, the file is much smaller than PNG with negligible visual difference, but some data is permanently discarded. JPEG does not support transparency. WebP is a modern format developed by Google that offers both lossy and lossless compression with smaller file sizes than both PNG and JPEG at equivalent quality. WebP supports transparency and is natively supported by all modern browsers. For photos, JPEG at 90-95% quality is usually the best balance. For images with text, sharp edges, or transparency, use PNG. For the smallest file size with good quality, use WebP.
Filter Formulas
CSS Filter Composition
filter: brightness(B/100) contrast(C/100) saturate(S/100) hue-rotate(Hdeg) blur(Xpx) grayscale(G/100) sepia(P/100) invert(I/100) opacity(O/100)
Multiple CSS filter functions compose left-to-right. The order matters: applying brightness before contrast gives different results than the reverse.
Preset Intensity Blend
output = default + (preset - default) × (intensity / 100)
Each slider value is linearly interpolated between its default value and the preset target value based on the intensity percentage.
Unsharp Mask Kernel (Sharpness)
K = [[0, -1, 0], [-1, 5, -1], [0, -1, 0]]
A 3×3 convolution kernel that enhances edges by subtracting a blurred version from the original. Strength parameter blends between original and sharpened: output = lerp(original, sharpened, strength/100).
Reference Tables
Preset Filter Values
CSS filter values for each built-in preset (values shown as slider positions)
| Preset | Brightness | Contrast | Saturation | Hue° | Grayscale | Sepia |
|---|---|---|---|---|---|---|
| Original | 100 | 100 | 100 | 0 | 0 | 0 |
| Grayscale | 100 | 110 | 0 | 0 | 100 | 0 |
| Sepia | 105 | 100 | 100 | 0 | 0 | 80 |
| Vintage | 105 | 110 | 80 | 0 | 0 | 30 |
| Noir | 90 | 140 | 0 | 0 | 100 | 0 |
| Vivid | 110 | 115 | 180 | 0 | 0 | 0 |
| Dramatic | 90 | 140 | 110 | 0 | 0 | 0 |
| Warm | 105 | 100 | 130 | 350 | 0 | 20 |
| Cool | 110 | 100 | 80 | 180 | 0 | 0 |
| Cinematic | 95 | 120 | 80 | 0 | 0 | 10 |
Worked Examples
Creating a Warm Vintage Look
Start with a landscape photo and apply the Vintage preset at 70% intensity, then fine-tune.
Apply the Vintage preset (brightness: 105, contrast: 110, saturation: 80, sepia: 30)
Set preset intensity to 70% — each value blends: brightness = 100 + (105-100) × 0.7 = 103.5
Increase warmth by adding +5 to brightness (108.5 total) and setting vignette to 20%
The result: a subtly aged look with warm tones and soft darkened edges
CSS output: filter: brightness(1.085) contrast(1.07) saturate(0.86) sepia(0.21); plus a radial-gradient vignette overlay at 18% opacity.
How to Use
Upload Your Image
Drag and drop an image file onto the upload area, click to browse your files, paste a screenshot from your clipboard (Ctrl+V), or enter an image URL. Supported formats include JPG, PNG, WebP, GIF, and BMP. Your image stays in your browser and is never uploaded to any server.
Apply Presets or Adjust Sliders
Browse the preset gallery to apply one-click looks like Vintage, Noir, Vivid, or Cinematic. Each preset shows a live thumbnail preview on your actual image. Use the intensity slider to control how strongly the preset is applied. Alternatively, manually adjust individual sliders for brightness, contrast, saturation, hue, blur, grayscale, sepia, invert, opacity, sharpness, and vignette.
Compare and Fine-Tune
Hold the 'View Original' button or press and hold the Space bar to temporarily see the unfiltered image. Enable Split View to drag a divider across the image for a side-by-side before/after comparison. Use undo and redo buttons to step through your editing history. Each slider has an individual reset button to snap a single control back to its default value.
Download or Share
Choose your preferred download format — PNG for lossless quality, JPEG for smaller files (with adjustable quality slider), or WebP for the best compression. Click Download to save the filtered image at full native resolution with no watermark. Copy the CSS filter code to use the same effect in your website stylesheets, or share a link that encodes your filter settings in the URL.
Frequently Asked Questions
Are my images uploaded to a server?
No. Our Photo Filter tool is 100% client-side, meaning all processing happens directly in your browser using the HTML5 Canvas API and CSS filters. Your images never leave your device — they are not uploaded, stored, or transmitted anywhere. This makes the tool completely private and safe for sensitive or personal photos. Even the filter settings you share via URL contain only the slider values, not any image data.
Will the downloaded image have a watermark?
No. The filtered image you download is completely clean with no watermarks, branding, or logos. When you click Download, the tool renders your image at its full native resolution onto an HTML5 Canvas element, applies all your filter adjustments, and generates a standard image file in your chosen format (PNG, JPEG, or WebP). The result is indistinguishable from a professional editor's output.
What is the difference between PNG, JPEG, and WebP?
PNG uses lossless compression, preserving every pixel exactly as rendered — ideal for images with text, sharp edges, or transparency, but produces larger files. JPEG uses lossy compression controlled by the quality slider — at 90-95% quality, photos look nearly identical to the original but are significantly smaller. JPEG does not support transparency. WebP is a modern format by Google that achieves better compression than both PNG and JPEG at equivalent quality, supports both lossy and lossless modes plus transparency, and is supported by all modern browsers.
What do the sharpness and vignette sliders do?
Sharpness applies an unsharp mask convolution — a pixel-level operation that enhances edge contrast, making details appear crisper and more defined. It works by detecting boundaries between light and dark areas and increasing their contrast. The strength slider controls how much sharpening is applied, from subtle clarity enhancement to aggressive edge sharpening. Vignette creates a gradual darkening around the edges of the image using a radial gradient overlay, drawing the viewer's eye toward the center of the frame. This mimics a characteristic effect of older camera lenses and is commonly used in portrait and artistic photography.
How does the preset intensity slider work?
The preset intensity slider blends between the original (default) filter values and the preset's values at any percentage from 0 to 100. At 0% intensity, the preset has no effect and you see the original image. At 100%, you get the full preset look. At 50%, each slider value is exactly halfway between the default and the preset value. For example, if a preset sets contrast to 140% and the default is 100%, at 50% intensity you would see contrast at 120%. This gives you thousands of possible variations from each preset.
Can I use the CSS filter code in my website?
Yes. The CSS Code panel shows the exact CSS filter property that corresponds to your current slider settings. Click the Copy CSS button to copy it to your clipboard, then paste it into your stylesheet. Apply it to any HTML element (images, divs, sections) using the 'filter' CSS property. CSS filters are supported by all modern browsers and are GPU-accelerated, so they perform well even on mobile devices. Note that CSS filters only support the standard filter functions — sharpness and vignette effects use canvas operations and cannot be replicated with CSS alone.