CSS Formatter
Format or minify CSS code instantly.
What the CSS Formatter does
This tool tidies up CSS in two opposite directions. Format mode takes messy, minified or inconsistently spaced CSS and rewrites it with proper indentation, one declaration per line and a blank line between rules, making it far easier to read and edit. Minify mode does the reverse, stripping comments and unnecessary whitespace to produce the smallest possible output for faster page loads.
It is handy for front-end developers, students learning CSS, and anyone who has pasted a compressed stylesheet and wants to understand it. Because it runs instantly, it is a quick way to clean up a snippet before committing it or to shrink a file before shipping it to production.
How to use it
Paste your CSS into the input box and choose either Format or Minify using the toggle at the top. Click the button - labelled to match the mode you selected - and the result appears in the output box below. Use the Copy button to copy the result to your clipboard with a single click.
Format mode applies a clean two-space indentation, places each property on its own line and separates rule blocks with a blank line. Minify mode removes comments and collapses whitespace around braces, semicolons, colons and commas. You can switch modes and re-run as many times as you like.
Notes and tips
Comments written with /* ... */ are removed during both formatting and minifying, so keep an original copy if you need to preserve them. The formatter focuses on whitespace and structure; it does not rename, merge or reorder your selectors and properties, so your styles behave exactly the same after formatting. For very large stylesheets, minifying can produce a noticeably smaller file, which helps reduce bandwidth and improve load times.