How to use the css formatter
- Paste your CSS into the first box. A small example is already there so you can see the result.
- Choose Readable (expanded) to indent every rule, or Minified to remove spaces and comments.
- Pick how to indent (2 spaces, 4 spaces or tabs), and decide whether to keep comments and put a blank line between rules.
- Read the result in the second box, then copy it or download it as a .css file.
A minified rule made readable
Paste a{color:red;margin:0} and the formatter returns the rule on four lines: the selector and an opening brace, then color: red; and margin: 0; each on its own indented line, then a closing brace.
Switch to Minified and paste the readable version back in, and you get a{color:red;margin:0} again, with the last semicolon dropped because the closing brace makes it unnecessary.
What the formatter changes and what it leaves alone
The tool reads your text as strings, comments, parentheses, braces and semicolons, builds a list of rules and declarations, and writes that list back out. Strings are copied exactly, so a content value that holds a brace or a semicolon is safe. Anything inside url( ) is copied as written, which keeps data addresses with semicolons and commas intact.
In readable mode a comma in a selector list starts a new line, a space is added after the colon in each declaration, a space is added after commas in values, and !important is separated from the value. Rules inside @media and other at-rules are indented one more level. Nested rules, as used in modern CSS, are indented the same way.
Limits worth knowing
The formatter does not check that your CSS is valid. A misspelled property is formatted like any other, and a value the browser would reject is left as it is. It also does not rewrite selectors, so a>b stays as you typed it. If braces do not match, or a string or comment is never closed, the tool stops and tells you the line to look near instead of guessing.
Input is limited to 1,000,000 characters, and everything happens in your browser. For JSON use the JSON formatter and validator, and for related CSS helpers see the box shadow generator and the CSS grid generator.
When to minify
Minifying removes white space and comments so the file is smaller to send. It is meant for a copy you publish, not the copy you edit. Keep your readable source, and run this on a copy. The size line under the input shows how many characters were saved.
Assumptions and limits
- CSS is read as text only. Nothing is fetched, imported or applied to this page.
- Selectors, property names and values are re-spaced but never rewritten or checked for validity.
- Comments are kept in readable mode when the option is on, and removed in minified mode except those starting with /*!.
- Input over 1,000,000 characters is refused with a message.
Frequently asked questions
Is my CSS uploaded anywhere?
No. The CSS is formatted by code running in your browser tab. Nothing is sent to a server, so private stylesheets are safe to paste.
Why was the last semicolon removed when I minified?
A semicolon only separates declarations, so the final one before a closing brace is optional. Dropping it saves a character in every rule.
Will formatting change how my page looks?
It should not. Only white space, line breaks and comments change, and the rules, selectors and values mean the same thing. Test once if your CSS uses unusual hacks.
What happens with broken CSS?
If a brace, string or comment is not closed, the tool shows an error with the line to check and writes no output, so you never copy half formatted code.