Free · Fast · Privacy-first

Unminify CSS Online

Reverse the minification process with FixTools.

⚡

Restores whitespace and indentation to compressed CSS

🔒

Handles all at-rules and nested structures

✨

Runs entirely in your browser for privacy

⚡

Free, instant, no account needed

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this CSS Formatter to your website

Drop the CSS Formatter into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/css-formatter?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="CSS Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/css-formatter?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="CSS Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Unminifying CSS: How to Restore Compressed Stylesheets for Editing and Debugging

Minified CSS is a one way optimisation for delivery. It reduces file size for production but makes the file opaque to humans who try to read it. Unminifying reverses the visual compression by inserting standardised whitespace and newlines, transforming a single dense line back into a multi line document with clear structure. The process cannot recover comments or any meaning that was lost during the original compression, but it reconstructs the full structural layout of every rule, selector, declaration, and at-rule block. The result is a stylesheet that is as readable as well formatted hand authored CSS, ready to be read and edited by anyone on your team without the friction that a minified file would otherwise impose on every interaction.

The most common need to unminify CSS arises when debugging production issues, particularly visual regressions that did not appear in the development environment. The browser DevTools panel shows you which rule is applied to a given element, but tracking that rule back to its origin in a single line minified stylesheet is nearly impossible. Unminifying the stylesheet and searching for the offending selector in the formatted output is dramatically faster. Similarly, when a third party library update causes a visual regression that was not anticipated, unminifying the new version and comparing it to the unminified previous version reveals exactly what changed at the level of rules and selectors, which is the level at which the regression can be understood and fixed.

Unminifying is also essential when a project's original source files are no longer available. If a developer leaves a project and the source repository cannot be located, or if a contractor handed over only production assets, the production minified CSS may be all that remains of the styling logic. Unminifying that file into a readable stylesheet is the starting point for understanding the existing styles and eventually reauthoring the source in a maintainable format. The unminified file is not a substitute for proper version control of source, but it is a recoverable baseline that turns an opaque artifact into a working document.

There is also an audit use case that comes up more often than developers expect. Whenever you are about to add a third party CSS file to a project, especially one served from a CDN whose contents you do not control, unminifying it first lets you inspect the selectors and detect any rules that might conflict with your existing styles or target elements you did not intend to style. The audit takes a few minutes and can prevent hours of debugging later when a surprising visual change appears with no obvious cause.

MDN Web Docs: CSS W3C CSS Syntax Specification

How to use this tool

💡

Paste compressed CSS into the input panel and click Format. The unminified output displays with full indentation and newlines.

How It Works

Step-by-step guide to unminify css online:

1
Get the minified CSS
Copy the minified CSS from its source. The source might be a production file you can access via the network panel in DevTools, a static asset in your build output directory, a response from a CDN URL, or a paste from a colleague who sent it in a chat message. Whatever the origin, you only need the raw CSS text, no preprocessing required.
2
Paste into the formatter
Paste the compressed CSS into the FixTools CSS Formatter input panel. The panel accepts any size of input and parses it locally in your browser, so very large bundles work just as well as small files. There is no upload to a server and no waiting; the operation begins as soon as you click the Format button.
3
Format
Click Format to unminify the CSS and restore indentation, newlines, and consistent spacing. The transformation completes in a fraction of a second even for files of hundreds of kilobytes. The output panel updates immediately and shows a multi line indented stylesheet that you can read and search in the same way you would read any other source file.
4
Save and work with the output
Copy the unminified CSS and save it as a working file for reading, debugging, or editing. Give the file a clear name that indicates it is a reconstruction rather than original source, such as adding a .unminified suffix, so future developers do not mistake it for the production artifact or for the authoritative version controlled source.

Real-world examples

Common situations where this approach makes a real difference:

A developer copies a minified stylesheet from a staging server's network response and unminifies it in FixTools to identify which rule is causing a layout issue on mobile.

The bug only appears on mobile breakpoints and the staging server has no source maps configured. The developer copies the minified CSS from the network panel, unminifies it, searches for media query rules with the breakpoint range that matches the broken viewport, and identifies the offending selector within a few minutes. The same investigation against the minified original would have taken much longer because every search through dense single line text is slower than a search through structured indented code.

An agency takes over a client's website and unminifies the production CSS to reconstruct a working stylesheet before beginning a redesign.

The previous agency provided only deployment access, no source repository. The new agency unminifies every production CSS file, saves the formatted output as working source, and uses it as a baseline for planning the redesign. The reconstructed source is not a perfect replacement for the original but it is sufficient to understand what styles currently apply, which the agency needs to plan the migration without surprising the client with unexpected visual changes during the rollout.

A developer unminifies a third-party widget's CSS to understand its selectors before writing overrides that will not accidentally break the widget's layout.

The widget is a chat button that needs to be styled to match the host site's brand. The developer unminifies the widget CSS, reads the selectors used by the widget's internal elements, and writes a small set of overrides that target only the visual properties they want to change without touching layout properties that the widget depends on. The unminified source makes this surgical override approach possible, whereas the minified source would have made it too risky.

A site reliability engineer unminifies a deployed CSS asset to confirm it matches what came out of the build pipeline for a specific release.

A user reported a styling bug that the team could not reproduce locally, raising the possibility that the deployed CSS differs from what the build produced. The engineer unminifies both the deployed asset and the build artifact and runs a diff. Any actual differences become visible in the structured indented output, and the team can quickly confirm whether the issue is a deployment problem or a code problem in the source.

When to use this guide

Use this when you have a minified CSS file you need to read or modify, from a production server, a third-party library, or a project where the source files were lost.

Pro tips

Get better results with these expert suggestions:

Unminify to audit unused rules

After unminifying a production stylesheet, search the output for selectors that reference class names or IDs that no longer exist in the current HTML. Unminified CSS makes identifying dead rules straightforward in a way that compact CSS does not. Dead rule cleanup typically reduces both file size and cognitive load on future developers reading the codebase, and the audit is far faster against a readable source than against a single line file.

Check media query breakpoints after unminifying

Minification sometimes makes it hard to see how many breakpoints a stylesheet uses and what values they cover. Unminify and scan for @media rules to get a clear picture of the responsive design strategy in the file. Inconsistencies in breakpoints, such as one rule using a slightly different pixel value than the others, are easy to spot in the unminified output and easy to harmonise into a single set of named breakpoints.

Use browser DevTools alongside the unminified file

Open the unminified output in a text editor and keep the browser DevTools open at the same time. When DevTools identifies a rule applied to an element, search for the selector in the unminified file to understand its full context, including any other declarations in the same rule block and any nearby rules that may share a media query parent. The combination of DevTools precision and text editor readability is far more productive than either alone.

Unminify before adding to a new framework

If you are migrating a site from one framework to another and need to preserve existing styles, unminify the production CSS first so you can identify which rules to migrate to the new framework and which to discard as no longer needed. The unminified file becomes a working document for the migration plan, and the rules you decide to migrate can be moved into the new framework's convention one section at a time.

Unminify before debugging in DevTools

Copy the minified stylesheet from your browser's network panel and unminify it before searching for a specific rule. The formatted output is much faster to scan than the compressed original.

Compare unminified versions to spot differences

When a CSS library update causes unexpected changes, unminify both the old and new versions and run a text diff. The changes become immediately visible in the formatted output.

Treat unminified output as a reference, not a source

Unminified CSS is a reconstruction, not the original source. Use it as a reference to understand the rules, but aim to re-author from scratch if you need a maintainable codebase.

FAQ

Frequently asked questions

In common usage, yes. Both terms describe restoring whitespace and indentation to a minified stylesheet. The CSS file is not compressed in the gzip or archive sense, it simply has had its whitespace removed by a minifier, so decompression is a colloquial term for the same operation. The actual data was never compressed; it was just reformatted to take less space. Unminifying reverses the whitespace removal and produces a readable result that is functionally identical to the minified input.

No. Minification permanently removes comments as part of the size reduction process. Unminifying cannot recover information that was deleted from the file, only structural CSS rules and declarations are recoverable. If comments matter for your understanding of a stylesheet, you need the original source from version control rather than an unminified version of the production artifact. Some minifiers preserve special license headers when configured to do so, in which case those headers will appear in the unminified output, but ordinary documentation comments will not.

Yes. Whitespace has no effect on CSS parsing or style application because the parser normalises whitespace before interpreting the rules. The unminified and minified versions of the same stylesheet produce identical visual output in any browser. You can use either version in production, although the minified version is preferred for production because it is smaller and transfers faster across the network, saving every visitor a small amount of load time.

Yes, as long as the output is valid CSS. CSS from any minification tool such as cssnano, clean-css, esbuild, or the built in minifiers in webpack, Vite, or Rollup can be unminified. The formatter works on the CSS output itself, not on the tool that produced it, so the choice of build tool does not affect the unminifier's ability to format the result. The only requirement is that the input is structurally valid CSS.

Yes. Tailwind's compiled CSS output is standard CSS and unminifies correctly. The output will show all the generated utility classes in full formatted detail, which can be quite long because utility frameworks typically generate one rule per utility class and they all become individually visible in the unminified output. Be prepared for files that span tens of thousands of lines after unminifying, especially if the build did not purge unused utilities.

Yes. All processing happens in your browser using client side JavaScript. Your CSS is never transmitted to a server, never stored on disk anywhere outside your own machine, and never logged in any third party system. This makes the unminifier safe to use for proprietary code, internal stylesheets, and unreleased projects. If you want to verify this, open your browser network panel before unminifying and watch for any outbound requests during the operation; you will not see any.

They describe the same operation. Unminify emphasises that the input was minified and that the task is to undo the minification. Pretty print emphasises the visual improvement of the output. In tools and conversations the terms are often used interchangeably, and the result they describe is the same: a multi line, indented, readable CSS file produced from a single line or otherwise compressed input. Choose whichever term feels more natural for your workflow.

You can edit the unminified CSS, but for production deployment you should minify it again first. Shipping unminified CSS in production adds unnecessary bytes to every page load, which slows down first paint times and increases bandwidth costs for both your servers and your visitors. The right workflow is: unminify to read or edit, save the source, and then minify the edited source before deploying. The CSS Minifier tool handles the final step.

Yes. The unminifier never reorders rules within a file. The order in the minified input is preserved exactly in the unminified output, which matters because CSS cascade resolution depends on declaration order when specificity is equal. If your minified file had rule A followed by rule B with the same specificity, the unminified version will have the same order and resolve cascade conflicts in the same way. This deterministic preservation is important for correctness.

Yes. Modern CSS features including @layer, @container, @scope, the :has() selector, and native CSS nesting are all handled correctly. The unminifier parses any valid CSS syntax and reformats it with consistent whitespace and newlines. As new CSS features gain browser support and start appearing in production stylesheets, the unminifier handles them without any tool update being required, because the underlying CSS syntax it parses remains backward compatible.