CSS Minifier vs Uglifier vs Tree-Shaking

Last reviewed 2026-04-27. Open the CSS minifier for in-browser minification without uploading the source.

Minifier - whitespace and comments

Minifier - whitespace and comments: CSS Minifier strips characters the browser ignores so the stylesheet ships smaller - it does not rename selectors or drop unused rules the way an uglifier or tree-shaker would.

Modern CSS minifiers go further than whitespace: collapse 0px to 0, replace #ffffff with #fff, remove redundant default values, merge adjacent selectors with identical rules. Each one shaves a small percentage; the cumulative effect is meaningful.

Uglifier - rename to save bytes

Uglifier - rename to save bytes: shortens identifiers where safe in JS/CSS pipelines - riskier on CSS than a plain minifier because class names often must match HTML and runtime strings.

Uglifier requires understanding the code's scope rules - you can rename a local variable freely, but renaming a global breaks anything that depends on the name. Tools like Terser, esbuild, and SWC do this safely by analyzing the scope graph.

For CSS, the equivalent is renaming class names. Build pipelines that hash CSS classes to .a, .b, .c save bytes the same way - but only work when the HTML is built with the same pipeline so the references match.

Tree-shaking - delete what nothing uses

Tree-shaking - delete what nothing uses: build tools drop unused exports after static analysis - it needs a module graph; pasting into CSS Minifier alone cannot recover or shake a bundled app.

Tree-shaking requires the source code to be in a format that supports the analysis - native ES modules ("import" / "export") rather than CommonJS ("require"). Library authors have spent years migrating to ESM specifically to make tree-shaking effective for their consumers.

For CSS, tree-shaking has a parallel called PurgeCSS or TailwindCSS's JIT mode: scan the HTML and only include CSS rules that match an actual class name in the markup. Tailwind ships with thousands of utility classes; the production build includes only the ones in use.

What to reach for first

What to reach for first is CSS Minifier for a stylesheet you already authored; add bundler tree-shaking in the app build; treat uglify as an advanced JS step, not the first CSS fix among minifier vs uglifier vs tree-shaking.

The CSS Minifier on this site handles the first step - paste a stylesheet and copy the compressed output; nothing leaves your device. Uglification and tree-shaking need a build tool (webpack, esbuild, or Vite) that can read the full module graph, because a paste-only tool has no way to trace which class names or exports the rest of the codebase actually references.

For a non-bundled project where you just want a smaller stylesheet, run the CSS minifier on the final CSS. For a closer look at minification vs compression, see css minifier vs compressor or how to minify CSS and JS for Cloud Run cold start. The full set: developer tools hub.

Last reviewed: 2026-07-01

FreetoolOnline editorial team