CSS Formatter & Minifier

About CSS Formatter & Beautifier

The CSS Formatter uses the js-beautify CSS engine to convert compressed or hand-written stylesheets into clean, consistently spaced code — with each rule on its own line, proper brace alignment, and optional blank lines between rule sets for clarity. The configurable indent size and newline-between-rules toggle let you match any team style guide with a single click.

The minify mode strips all comments and unnecessary whitespace, producing the smallest possible stylesheet for production. Both modes show a real-time character count and percentage savings. No data leaves your browser, so your unreleased designs and proprietary styles stay confidential.

Common Use Cases

• Beautifying a vendor's minified CSS file before reading or modifying it.
• Standardizing brace placement and indentation in a team stylesheet.
• Minifying a large CSS file before deploying to production to cut page load time.
• Quickly auditing the structure of a third-party CSS library without running a build tool.

How to Use

1. Paste your CSS, SCSS-like code, or minified stylesheet into the Input CSS panel.
2. Choose indentation (2 or 4 spaces) and toggle "Newline between rules" to your preference.
3. Click "Format" to beautify or "Minify" to compress the stylesheet.
4. Check the stats row for exact byte savings, then click "Copy" to use the result.

Frequently Asked Questions

Does the minifier support removing CSS comments?

Yes. The built-in minifier strips both single-line and multi-line CSS comments (/* … */) along with excess whitespace. This is useful for removing development notes or license headers that you don't want exposed in the production stylesheet.

Will this tool work with SCSS or LESS?

It works well with SCSS-like syntax including nested selectors and variables. However, it does not compile SCSS to plain CSS — it only formats the text as-is. For full SCSS compilation you would need a preprocessor such as Sass CLI or a build tool like Vite.

How much file size can I expect to save by minifying CSS?

Savings vary depending on how many comments and blank lines exist in the original file. For well-formatted stylesheets with comments, minification typically reduces file size by 20–40%. For already-compact code the savings are smaller. The stats row shows the exact character count reduction after every operation.