Image Filters

Apply CSS-based photo filters — brightness, contrast, saturation, blur, hue rotate, grayscale — and download the result.

Last updated: March 25, 2026

Adjustments

Brightness 100%

Contrast 100%

Saturation 100%

Hue Rotate 0°

Effects

Grayscale 0%

Sepia 0%

Invert 0%

Blur 0px

Preview

Upload an image to start editing

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Image Filters?

CSS image filters are a set of rendering effects defined in the CSS Filter Effects specification. They apply visual transforms to an image directly in the browser — no server-side image processing library required. The CSS filter property accepts one or more filter functions: brightness(1.2) increases exposure, contrast(1.5) increases the difference between lights and darks, saturation(0) removes color (grayscale), sepia(1) adds a warm brown vintage tint, blur(2px) applies a Gaussian blur, hue-rotate(180deg) shifts all colors around the HSL color wheel, and invert(1) creates a negative.

These are the same filter functions used to create Instagram-style, VSCO-style, and Lightroom-like presets without requiring any native code. The filters are applied to the image on a Canvas element, which allows the filtered pixel data to be exported as a downloadable PNG. Because all processing uses the W3C Canvas API in the browser, processing is near-instantaneous for images up to 12 megapixels and your original image is never transmitted to any server.

How to Use Image Filters

Upload a photo (JPG, PNG, WebP, or GIF) using the file picker or drag-and-drop

Use the sliders to adjust individual filter values: start with Brightness and Contrast for exposure/tone

Use Saturation to enhance (>1) or desaturate (<1) colors; set to 0 for full grayscale

Add Sepia for a vintage warm tone or Hue-Rotate to shift the overall color temperature

Preview updates in real-time — click "Download" to save the filtered image as PNG

Common Use Cases

Converting a color photograph to black-and-white (grayscale) for print or portfolio use
Applying a warm sepia tone to an old photo to enhance its vintage aesthetic
Boosting brightness and contrast on a dark photo taken in low lighting conditions
Over-saturating product photos for vibrant social media visuals
Applying a slight blue hue-rotate to give portraits a cooler, cinematic look
Desaturating a background image to let foreground content stand out in a web hero section
Softening a portrait with a mild blur for a dreamy editorial aesthetic
Inverting medical imaging photos or map screenshots for better visualization

Example Input and Output

Filter values for a classic "cool film" photo look:

Filter configuration

Brightness: 1.05 (+5% brighter)
Contrast: 1.1 (+10% more contrast)
Saturation: 0.85 (slightly desaturated)
Hue-rotate: -10deg (slight cooling toward blue)
Sepia: 0.08 (very faint warm tint for film grain)
Blur: 0px (no blur)

Equivalent CSS filter string

/* CSS filter string (also applied to Canvas) */
filter: brightness(1.05)
        contrast(1.1)
        saturate(0.85)
        hue-rotate(-10deg)
        sepia(0.08);

/* Apply to an img tag directly */
img.film-look {
  filter: brightness(1.05) contrast(1.1)
          saturate(0.85) hue-rotate(-10deg)
          sepia(0.08);
}

Total Privacy

All filter operations run in your browser using the HTML5 Canvas API. Your photos are never uploaded to our servers. This tool works fully offline once the page is loaded.

CSS Filter Preset Copy

The "Copy CSS" button gives you the exact filter string for direct use in stylesheets. You can use this in Tailwind with: class="[filter:brightness(1.1)_contrast(1.2)]" or with a CSS variable: --photo-filter: brightness(1.1) contrast(1.2); applied via filter: var(--photo-filter). This makes the preset instantly reusable across your entire design system.

Browser GPU Acceleration

CSS filters applied directly to <img> elements (without Canvas export) are GPU-composited by the browser — they do not affect JavaScript performance and update at 60fps. When applied via Canvas (for download purposes), the browser temporarily rasterizes the filter on the CPU. For pure display purposes in a web page, keeping filters as CSS (not Canvas baked) is faster and more memory efficient.

Frequently Asked Questions

How does applying CSS filters differ from using Photoshop adjustments?

CSS filter functions are fast, GPU-accelerated approximations of photographic adjustments. Photoshop (and Lightroom) operate on raw pixel mathematics per channel with 16-bit or 32-bit color depth, supporting operations like healing, masking, curves, levels, and layer compositing. CSS filters are limited to the eight defined functions and cannot replicate advanced Photoshop edits. However, they are perfectly suited for quick photo enhancement and color grade effects applied to web-displayed images.

Does applying filters reduce image quality?

The filter application is lossless within the browser Canvas (it operates on raw RGBA pixel values). However, the export step uses canvas.toBlob("image/png") which produces a PNG — lossless compression. If you export as JPEG (if supported), JPEG compression introduces quality loss. The filter math itself does not reduce precision below 8-bit per channel (standard photo quality). Result: the exported PNG quality is equivalent to the original photo quality.

What values do the filters accept?

Brightness/Contrast/Saturation: 0 = none, 1.0 = original, >1 = enhanced. Blur: any positive number in pixels (0 = no blur, 10px = heavy blur). Hue-rotate: degrees from -360 to 360 (0 = original colors, 180 = fully shifted to opposite colors). Sepia: 0 (no tint) to 1 (full brown vintage). Invert: 0 (original) to 1 (fully inverted negative). Grayscale: 0 (original) to 1 (full black-and-white). Opacity: 0 (transparent) to 1 (original).

Can I stack multiple filters?

Yes. The filter property accepts a space-separated list of functions: filter: brightness(1.2) saturate(1.5) sepia(0.3). Filters are applied in order from left to right, and each operates on the result of the previous filter. This is important: brightness() then contrast() produces a different result than contrast() then brightness(). Most photography presets combine at least 3-5 filter adjustments to achieve their signature look.

Can I use these filters directly on my website as CSS?

Yes. The CSS filter string generated by this tool (e.g., filter: brightness(1.05) contrast(1.1) saturate(0.85)) can be copied directly into a CSS class and applied to any <img> element: .stylized-photo { filter: brightness(1.05) contrast(1.1); }. This renders in real-time by the browser without any image processing at the server — any changes to the CSS instantly update the displayed appearance without re-uploading images.

Does this work on large images?

The browser Canvas can handle images up to hardware limits (typically 4096×4096px to 16384×16384px depending on the browser and GPU). For typical DSLR photos (24 megapixels, ~6000×4000px), processing runs in under 1 second on modern hardware. Very large images (>100MP) may cause the browser to run out of memory or the tab to crash on mobile devices. For production batch image processing, server-side tools (sharp, ImageMagick) are more appropriate.

How This Tool Works

The uploaded image is drawn onto an HTML5 Canvas. Before drawing, ctx.filter is set to the composed filter string (e.g., "brightness(1.05) contrast(1.1) saturate(0.85)"). ctx.drawImage() renders the image with all filters applied to each pixel. The filtered canvas is exported via canvas.toBlob("image/png") and triggered as a file download. Live preview uses a CSS filter applied to the <img> preview element for instant responsiveness, then Canvas re-renders on export.

Technical Stack

HTML5 Canvas APICSS filter functionsctx.filter attributecanvas.toBlob() PNG exportClient-side only