Processed on-device · pdf.js + pdf-lib + Sortable.js

PDF Filter Studio Online — stack, reorder, and preview filters before you commit

Layer brightness, contrast, saturation, blur, and five more filters, reorder them to change the result, undo freely, and apply the stack to one page, a range, or the whole document.

See the four steps
9 stackable filters Drag to reorder Undo and redo Your PDF stays in your browser
Built & maintained by Bhavin J. Sheth | Updated

The filter studio console

Upload a PDF, build a filter stack with a live preview, then apply it.

Drop your PDF here

or browse files

How a filter stack actually works

A filter stack is layers, not one effect

Every filter you add sits in an ordered list, and the final look is the combined result of all of them applied in sequence — which is why reordering two filters can change the outcome as much as changing their values.

A visible stack, not a black box

A faded scan that needs both a brightness lift and a contrast boost, a photo album that needs sepia plus a slight vignette, a report that needs grayscale with the saturation already pulled down beforehand — real edits are rarely one filter. They're small combinations, applied in a specific order, that you'd otherwise have to redo from scratch every time you wanted to adjust one part.

Each layer you add here is its own entry in a visible, reorderable list, driving a single CSS filter string applied live to the canvas preview. Undo and redo step through the exact history of that list, so you can experiment freely and step back without losing earlier work.

Every control and what it changes

9 stackable filters

Brightness, contrast, saturation, blur, opacity, grayscale, sepia, invert, and hue rotate — add as many as you need.

Drag to reorder

Layer order changes the result — drag any layer up or down to see the difference live.

Undo and redo history

Every layer add, delete, reorder, or slider change is a step in history you can step back through.

Per-layer visibility

Toggle any single layer off to compare with and without it, without deleting your work.

Six ready-made presets

One-click combinations to start from, which you can still fine-tune afterward with individual layers.

Layer order changes the result as much as the values do

Building the stack is half the work — the other half is reordering it until it looks right.

1

Upload your PDF

Drag it onto the upload area, or click Select PDF. The first page loads into the live preview right away.

Navigate pages with the arrow buttons below the preview.
2

Add and adjust filter layers

Build your effect with the control panel:

Add layers: pick a filter and click Add.
Adjust sliders: fine-tune intensity in real time.
Manage layers: drag to reorder, toggle visibility, or delete.
3

Choose pages and apply

Pick which pages get the stack, then click Apply Filters to PDF to generate the new file.

The output is image-based, so the applied visual effect is preserved in the exported pages.
4

Rename and download

Rename the output file if you like, then download the finished PDF.

Layer editing Undo and redo history

From flat and faded to deliberately styled

A plain scanned page, given contrast, sepia, and a touch of vignette.

Original No effects
Original PDF page before filters are applied

A plain page with no visual enhancement — a faded scan or flat colors.

Filters applied
Filtered Styled
The same PDF page after contrast, sepia, and vignette filters are applied

A styled page with contrast, sepia tone, and a vignette layer.

Documents where a filter stack solves a real problem

Cases where a combination of adjustments does more than any single filter could on its own.

Common situations for applying PDF filters, by user type
Use caseWhat the filters help withTypical user
Scan restorationRaise brightness and contrast on old, faded scanned documents.Archivists & researchers
Ink-saving printingConvert color documents to grayscale before printing when color output is unnecessary.Offices & students
Portfolio stylingApply a consistent sepia or artistic tone across a photo album PDF.Photographers
Product catalogsAdd a vignette layer to product images to create more visual emphasis toward the center.E-commerce & marketers
Brand consistencyHue-rotate images to move them closer to a brand's existing color palette.Marketing teams
Report enhancementReduce saturation to tone down overly vibrant charts and images in a report.Business professionals
Photo albumsConvert an entire album to grayscale for a classic, cohesive look.Families & event planners
Creative layeringCombine blur, contrast, and sepia layers for a moody, cinematic feel.Designers & artists
Filter types explained

Nine filters, each doing one job

Each filter is a single, well-defined adjustment — here's what each one does and when it's useful.

Brightness

Adjusts how light or dark the page appears. 100% is original; below darkens, above brightens. Useful for lifting faded scans.

Contrast

Increases or decreases the difference between light and dark areas. Higher values can make text and edges appear more defined.

Saturation

Controls color intensity. 0% removes all color, 100% is original, above 100% makes colors more vivid.

Blur

Softens the page by blurring pixels. Useful for a depth-of-field look or softening a background behind overlaid text.

Opacity

Reduces the rendered page opacity. It can create a faded appearance in the preview, but note that the final PDF export outputs page images.

Grayscale

Converts color to shades of gray. 100% applies full grayscale, removing color while preserving light and dark tones.

Sepia

Applies a warm brown tone for a vintage look. 100% gives the full antique effect, popular for photo albums.

Invert

Reverses all colors — black becomes white and white becomes black. Produces a negative-like, dark-mode effect.

Hue rotate

Rotates every color around the color wheel, 0 to 360 degrees. Useful for shifting images toward a brand palette.

What the preset effects actually do

Grayscale, Sepia, and Invert apply the filter of the same name at full strength. The other three are worth being precise about, since their names suggest more than a CSS filter alone can do.

Sharpen-style

There's no true sharpening algorithm (no unsharp mask) running here — this preset stacks contrast and saturate at moderate values, which makes edges and text read as crisper without actually resolving more detail.

Use it when a page just needs to look punchier, not when you need to recover genuinely lost detail from a low-resolution scan.

Glow-style

This is a combination of brightness, saturate, and contrast — not a true bloom or glow effect, which would need to selectively brighten highlights and blur them back in.

It gives pages a brighter, more vivid feel — a reasonable starting point before you fine-tune with individual layers.

Vignette

This one is genuinely different from the others: it draws a darkened radial gradient directly onto the page pixels, fading in toward the edges. It isn't a CSS filter and isn't part of the layer list, so it doesn't show up as a reorderable layer.

It's baked into the page in both the live preview and the final exported PDF, and stays on until you click the button again or start over.

When the stack doesn't look right

What's actually happening, and the fastest way through it.

Symptom
Why it happens
Fix

Result isn't what I expected

Filters are applied in layer order, so changing the order changes the outcome.

Drag layers to reorder — Contrast before Grayscale gives a different result than the reverse.

A layer seems to have no effect

The layer's visibility is off, or its slider is at a value with no visible change.

Check the eye icon — click it to re-enable the layer — and confirm the slider isn't at 0.

Text isn't selectable in the output

Filters require every page to be re-rendered as an image to preserve the visual effect.

Expected behavior — keep your original PDF if you'll need searchable or selectable text later.

Output file is much larger

Image-based pages are typically larger than the original vector or text content.

Run the result through Compress PDF afterward to bring the size back down.

Password-protected PDF won't load

Password-protected PDFs may not load in this tool.

Remove the password with a PDF unlock tool first, then upload the unlocked copy.

Apply button does nothing

No PDF has been uploaded yet.

Upload a PDF first — the Apply button becomes active only once a file has loaded.

Not what I expected

Why: Changing the order changes the outcome.

Fix: Drag layers to reorder.

Layer has no effect

Why: Off visibility or slider at 0.

Fix: Enable the eye icon, check the slider.

Text not selectable

Why: Output is image-based.

Fix: Keep original for selectable text.

Output file larger

Why: Image-based pages.

Fix: Compress afterward.

Password-protected PDF won't load

Why: Password-protected PDFs may not load in this tool.

Fix: Unlock it first, then upload.

Apply button does nothing

Why: No PDF uploaded.

Fix: Upload a PDF first.

Building a filter stack without redoing it

A working order that avoids the most common redo.

Layer order matters

Filters are applied in layer order. Try reordering — Contrast before Grayscale gives a different result than the reverse.

Use the visibility toggle

Click the eye icon to temporarily disable a layer — a fast way to compare before and after for one specific filter.

Start subtle, build up

Add one filter at a time at a moderate value. It's easier to strengthen an effect than to fix an over-processed page.

Keep your original file

The output is a permanent, image-based PDF. Keep the source file if you might need selectable text or a redo later.

Apply to all pages for consistency

Build your stack on one page, then select All Pages before applying, for a uniform look across the document.

Use presets as starting points

Presets like Sepia or Sharpen-style are a fast starting stack — fine-tune the result afterward with individual layers.

PDF filter studio FAQs

If something's not covered here, the troubleshooting section above likely has it.

Is it safe to upload my documents here?

Yes. PDF processing happens locally in your browser, so the document itself is not uploaded to our server for filtering.

Will applying filters reduce the quality of my PDF?

Each page is converted into a high-resolution image to preserve the visual effect, which changes the format from vector to raster. Text is no longer selectable in the output, though visual clarity is maintained at the processing scale used.

Can I apply different filters to different pages?

You can apply one filter stack to a specific page range, then run the tool again on a different range with a different stack. Independent per-page filter stacks in a single session aren't supported yet.

What do the Sharpen, Glow, and Vignette presets actually do?

Sharpen and Glow are pre-built combinations of the same contrast, saturation, and brightness filters available individually — they don't run a true sharpening or bloom algorithm. Vignette draws a darkened radial edge directly onto the page and is baked into the final export.

Can I undo a change after I've downloaded the file?

No — the downloaded file is a new, separate PDF. Undo and redo only work on the filter stack before you apply it. Keep your original, unfiltered PDF if you might want to start over.

What happens to my file after I'm done?

Nothing — it was never uploaded. The filtered PDF is generated in your browser and downloaded as a new file; the original stays untouched.

Build notes

The write-up on how this was built

Because the layer system, drag-reorder, undo history, and final rendering all run client-side, I wrote up the implementation — how each layer's CSS filter function combines into one string, and how Sortable.js keeps the visual order and the underlying array in sync.

Published on freeCodeCamp

How to Build a Browser-Based PDF Filter Studio Using JavaScript

Covers rendering PDF pages to canvas, building a reorderable filter-layer system, undo/redo history, and generating a new PDF entirely client-side.

Read the write-up on freeCodeCamp

Written by Bhavin Sheth · Founder, AllInOneTools