Filters & Effects
Apply brightness, contrast, blur, sepia, grayscale, and more.
Filters & Effects puts eight adjustment sliders — Brightness, Contrast, Saturation, Blur, Grayscale, Sepia, Hue Rotate, and Invert — over your image with a live preview, matching the card: "Adjust brightness, contrast, blur, sepia, grayscale, and more with live preview." Move any slider and the preview alt text "Live preview" updates immediately via CSS filter functions.
Nothing is permanent until you click "Apply Filters", which bakes the same filter string into canvas pixels and produces a "Filtered result" you can download under the original filename. "Reset" returns sliders to neutral defaults without discarding your upload. The whole pipeline is local CSS and Canvas 2D — no network, no AI enhancement claims.
How it works
The live preview sets img.style.filter from getFilterCSS, which composes standard CSS filter functions: brightness(), contrast(), saturate(), blur(), grayscale(), sepia(), hue-rotate(), and invert() from the eight slider values (defaults are all neutral in DEFAULT_FILTERS).
Apply draws the image to a canvas with ctx.filter set to that same getFilterCSS(...) string, then drawImage → toBlob. PNG sources stay PNG; everything else re-encodes as JPEG at quality 0.92, preserving the original filename. Because preview and export share one function, what you see is what downloads.
How to use
- Drop an image; dimensions appear under the preview.
- Move Brightness (−100..100), Contrast (−100..100), Saturation (0..200), Blur (0..20), Grayscale (0..100), Sepia (0..100), Hue Rotate (0..360), and Invert (0..100) — the live CSS preview updates as you go.
- Click "Reset" if you want every slider back to neutral (the uploaded file stays).
- Click "Apply Filters" (label becomes "Applying...") to bake the look into pixels.
- Confirm the toast "Filters applied successfully!" and review the "Filtered result" image.
- Download the result (same name) or click "Start Over" to begin again.
- Use "Remove" to clear the current file from the workspace.
Tips
- Preview and export both call getFilterCSS — preview is CSS filter, Apply is ctx.filter on canvas — so they stay in sync.
- Blur goes up to 20px; combine low Saturation with high Sepia for a convincing vintage grade.
- Output keeps the original MIME: PNG→PNG, everything else JPEG 0.92 — use PNG sources when you need transparency preserved.
- "Reset" only clears sliders, not the uploaded file — tweak without losing your image.
- Hue Rotate at 180° is a quick color-inversion companion to Invert for stylized looks.
Filters & Effects FAQ
Does the preview match the download?
Both use getFilterCSS — the preview applies it as a CSS filter, Apply bakes it with ctx.filter on canvas.
Are filters saved without clicking Apply?
No — sliders only preview live; "Apply Filters" is what exports pixels to a downloadable result.
Which formats are supported?
Any browser-decodable image; export preserves PNG or re-encodes other formats as JPEG 0.92.
Is this AI enhancement?
No — only standard CSS/canvas filter functions (brightness, contrast, blur, and so on).
Is the image uploaded?
No — the entire filter pipeline runs locally in the browser.
Credits
- CSS Filters — Live preview via style.filter functions
- Canvas 2D API — ctx.filter baking and export