Monu Tools

CSS Formatter

Beautify CSS with clean indentation, or minify it to shrink file size. Handles media queries, calc() and license comments.

How to use the CSS Formatter

  1. 01

    Paste your CSS into the input box.

  2. 02

    Choose Beautify to format it or Minify to compress it.

  3. 03

    Pick the indent size, then copy the result.

What the CSS formatter does

This is a CSS formatter that beautifies stylesheets with clean, consistent indentation, or minifies them to shrink file size. You choose the indent size for beautifying, and switch to minify when you want the smallest output.

When to beautify and when to minify

Readable CSS is easier to scan, review and debug: when each rule and declaration is indented consistently, you can see selectors, nesting and the shape of your media queries at a glance.

Minifying is for production. It removes the whitespace and comments that browsers do not need, so the file downloads faster. On a large stylesheet the saving adds up, especially before gzip compression on the server.

Careful minifying with calc() and media queries

The minifier is careful where it matters. It keeps the spaces around plus and minus inside calc(), so calc(100% - 30px) stays valid, and it only strips spaces around structural characters such as braces, colons and semicolons. It also handles nested media queries correctly.

License comments are preserved

License comments written in the /*! ... */ form are preserved, which is the standard convention for keeping copyright and license notices in minified output even when ordinary comments are removed.

Runs in your browser

Both beautify and minify run entirely in your browser, so your stylesheets never leave your device. The tool formats for readability and size; it does not validate that your CSS is correct.

Frequently asked questions

Does minifying break calc() expressions?

No. The minifier keeps the spaces around plus and minus inside values, so calc(100% - 30px) stays valid. It only removes spaces around structural characters such as braces, colons and semicolons.

Are comments removed when minifying?

Normal comments are removed to save space, but license comments written as /*! ... */ are kept, which is the standard convention for preserving copyright notices.

Is my CSS uploaded anywhere?

No. Both beautify and minify run entirely in your browser, so your stylesheets never leave your device.

When should I beautify and when should I minify?

Beautify while you are reading, editing or reviewing CSS. Minify the final stylesheet for production, where a smaller file loads faster for visitors.

Does it check that my CSS is valid?

No. It formats and minifies the text for readability and size but does not validate properties or values, so it will reformat CSS even if it contains a mistake.

Sources

Embed this tool

Add this tool to your own website. Copy the snippet below; it stays up to date automatically.

<iframe src="https://monu.tools/embed/en/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

Related tools