Unminify CSS Online — How to Beautify and Read Minified CSS and JavaScript

What Does Unminify Mean?

Unminifying — also called beautifying, pretty-printing, or formatting — converts compressed, single-line code back into readable source with proper indentation and line breaks. When CSS or JavaScript is minified for production, all whitespace, newlines, and comments are removed to reduce file size. The resulting code is functionally identical to the original but completely unreadable to humans.

A beautifier reverses this process structurally: it parses the code and re-outputs it with consistent indentation and line breaks. What it cannot recover are things that were permanently deleted during minification — comments, original variable names in mangled JavaScript, and the original author's specific formatting style.

For CSS specifically, unminifying is lossless in every practical sense. CSS has no variable mangling — every selector, property, and value stays exactly the same. Only whitespace and comments are gone, and whitespace is fully restorable.

How to Unminify CSS Online (Step-by-Step)

How to Unminify JavaScript Online (Step-by-Step)

The process is identical for JavaScript. The only difference is that minified JavaScript from build tools like Terser or esbuild may have mangled variable names — those cannot be restored, but indentation and line breaks are fully recoverable.

Why Would You Need to Unminify CSS?

Minified code is the standard for production — every major website ships compressed CSS and JavaScript. But there are several situations where you need to read or edit that code:

• Debugging a third-party plugin or theme. WordPress themes, Shopify templates, and UI libraries often ship only minified CSS. If something looks wrong, you need to read the rules to understand why.
• The original source was lost. If a developer left a project and only the production build survives, the minified stylesheet is all you have. Beautifying it makes it editable.
• Understanding how another site's styles work. Inspecting a competitor's or reference site's production CSS is a common design research technique. Beautifying makes the rules readable.
• Auditing a CDN-hosted library before including it. Before adding a third-party CSS framework to your project, it's good practice to check what rules it contains.
• Editing a file where the build system is unavailable. If you need to make a quick fix and cannot run the full build pipeline, beautifying the production CSS makes manual editing possible.

Where to Find Minified CSS — And How to Copy It

Minified CSS appears in several places. Here is where to find it and how to copy it cleanly for pasting into the beautifier:

Minified vs Beautified CSS — What Changes, What Doesn't

It is important to understand exactly what beautifying changes and what it leaves untouched:

What a Beautifier Cannot Recover

Beautifying restores readability but not everything. These things are permanently lost when code is minified and cannot be recovered by any tool:

Browser DevTools Has a Built-In Beautifier — Try It First

Before pasting into an external tool, check whether your browser's built-in pretty-printer covers your needs:

1. Open DevTools (F12 or Cmd+Option+I on Mac).
2. Go to the Sources tab.
3. Find the minified CSS or JS file in the file tree on the left.
4. Click the { } icon at the bottom-left of the Sources panel. This is the Pretty Print button.
5. The file opens in a new tab with formatted, indented code. You can read it, set breakpoints (for JS), and search within it.

The DevTools pretty-printer is fast and works without copying anything. Its limitations: you cannot download the formatted output directly, it is scoped to what is loaded in the current page, and it does not work for CSS files you want to paste from an external source. For those cases — or when you want a downloadable formatted file — use the ToolLance beautifier.

Unminify vs Deobfuscate — Not the Same Thing

These terms are often confused because the result of both looks like unreadable code. But they describe different problems:

Re-Minify After Editing — Don't Deploy Beautified CSS

If you unminify a stylesheet to make edits, always re-minify before deploying to production. Beautified CSS is 3–5× larger than minified CSS. Serving it uncompressed will increase your page weight, slow Largest Contentful Paint (LCP), and hurt Core Web Vitals scores.

To re-minify after editing: paste the edited beautified CSS back into the CSS & JS Minifier, switch to the Minify tab, enable your preferred options (Remove Comments, Shorten Zero Values, Normalize Colors), and download the minified output.

For ongoing projects, this is a signal to set up a proper build pipeline so minification happens automatically. See the build pipeline comparison for Vite, webpack, Parcel, and Rollup options.

Privacy — Your Code Never Leaves Your Browser

All beautification runs locally in your browser using JavaScript. No CSS or JS is sent to any server. This is important for proprietary stylesheets, internal tools, and unreleased code. You can verify this by opening your browser Network tab and confirming no outbound requests are made when you paste and format.

Related Tools

After reading the structure of a minified stylesheet, you may want to compare it against a previous version — the Text Diff Checker highlights every changed line, word, or character. If the stylesheet references Base64-encoded fonts or images, the Base64 Encoder & Decoder decodes them instantly. And if you need to minify the CSS again after editing, the CSS & JS Minifier handles that with one click.