Skip to content

CSS Minifier and Beautifier

Shrink a stylesheet for production or turn a one-line minified file back into readable CSS. Everything runs in your browser, and the page shows exactly how many bytes you saved.

Smaller output, but rules can move. Turn it off if the order of your rules matters in a way the minifier can't see.

Processed in your browser. Your code is never uploaded.

How to minify or beautify CSS

  1. Paste your CSS into the Your CSS box, drop a .css file onto it, or press Open file. Press Try an example to see a sample stylesheet.
  2. Choose Minify or Beautify. For Minify, decide whether to keep Restructure and the Keep /*! … */ comments switch on. For Beautify, pick an indent.
  3. Check the result on the right. The size before and after, with the percentage saved, is shown underneath.
  4. Copy it or press Download .css to save the file.

Features

  • Minify with csso, a structural CSS optimiser, rather than simple space stripping.
  • Restructure switch to merge duplicate rules and drop overridden declarations, or keep the original rule order.
  • Licence comments kept (those starting with /*!) unless you turn that off.
  • Beautify with Prettier, with 2-space, 4-space or tab indentation.
  • Syntax errors with line and column, and the offending line marked with a caret.
  • Size before and after in bytes, with the percentage saved.
  • Paste, drop or open a file, then copy or download the result.

Why use Fileora to minify CSS

Online minifiers often post your stylesheet to a server. Fileora doesn't: the minifier and the formatter run as JavaScript in your browser, so unreleased designs and client work stay on your machine. There is no sign-up, no size quota and no watermark comment added to your output.

The tool also tells you what went wrong. Many minifiers silently drop a rule they can't parse; here you see the exact line and column so you can fix the source.

What minification does and doesn't do

Minified CSS behaves the same as the original, it just takes fewer bytes. The minifier removes whitespace and comments, shortens colours and zero values, merges shorthand where it is safe, and removes exact duplicates. With Restructure on, it goes further and combines rules, which is where most of the extra savings come from.

It does not know which selectors your pages actually use, so unused rules stay. It does not rename classes, rewrite url() paths, inline images or change media queries. If you need those, they belong in a build step; this tool is for quick one-off files, snippets for a CMS, or checking what a build would save.

Working on the rest of the page? Compress scripts with the JavaScript minifier, tidy markup with the HTML formatter, or design a background with the CSS gradient generator.

Tips for smaller stylesheets

Serve the minified file with gzip or Brotli compression on your server; the two together save far more than either alone. Keep the readable version in your project and minify a copy, because minified CSS is hard to edit. And if a rule seems to disappear after minifying with Restructure on, check whether an identical declaration later in the file already overrides it.

Frequently asked questions

What exactly does the CSS minifier change?

It removes comments, line breaks and spaces that browsers don't need, drops the last semicolon in each rule, removes empty rules, and writes values in shorter forms. For example #ffffff becomes #fff, 0px becomes 0, font-weight bold becomes 700 and padding 10px 20px 10px 20px becomes 10px 20px. With Restructure on, it also merges rules that share a selector or declarations and removes declarations that a later one overrides.

Is it safe to use the Restructure option?

In most stylesheets, yes. The minifier only merges rules when it can tell the result renders the same. Because restructuring can move a rule to a different position, turn it off if your CSS relies on source order in a way the minifier cannot see, for example when the same element is matched by two unrelated selectors that set the same property. With it off, rules stay in their original order.

Does it remove unused CSS or rename my classes?

No. The tool only sees your stylesheet, not the HTML that uses it, so it cannot know which selectors are unused. Class names, IDs, custom property names and keyframe names are never renamed. It also doesn't add vendor prefixes, compile Sass or Less, or create a source map.

What happens to my licence comment?

Comments that start with /*! are kept by default, because that is the usual way to mark a licence or copyright notice that must stay in the minified file. Switch off Keep /*! … */ comments to remove them too. Normal comments are always removed when minifying.

Why do I see a syntax error but still get a result?

The minifier's parser is forgiving: when it meets a broken part, such as a missing colon, it skips that part and carries on. The tool shows the line and column of the first problem so you can check whether anything important was dropped. In Beautify mode a syntax error stops formatting until you fix it.

How does Beautify format my CSS?

Beautify uses Prettier, the widely used code formatter. It puts every declaration on its own line, indents with 2 spaces, 4 spaces or tabs, adds spaces after colons and normalises quotes and colour case consistently. It is the quickest way to read a minified stylesheet from a website or library.

Is my CSS uploaded anywhere?

No. Both minifying and formatting run inside your browser tab. The minifier and formatter are downloaded the first time you use them and then work locally, so private or unreleased stylesheets never leave your computer.

Related tools

Can't find the tool you need, or something isn't working?

Tell us which tool you'd like next or what went wrong. We read every message, and requests decide what we build next.

Request a toolReport a problem

Opens your email app. Please don't attach private files.