CSS Formatter Online
Beautify or minify CSS instantly in your browser.
When a CSS formatter is the right tool
Styles often arrive as one long line, or with mixed indent from several tools. This page is for a first tidy-up: paste CSS, choose Beautify or Minify, and get a rewritten copy in the browser. Beautify uses 2- or 4-space indent. The output updates as you type.
This is not a CSS parser. It works best on ordinary rule blocks. Treat the result as a starting point, especially if the file has comments or strings that contain braces or colons.
Use cases
Reading a minified stylesheet
A one-line .button:hover rule is easier to scan when each declaration starts a new indented line. Load Sample pastes a short layout sheet with a hover rule and a media query if you want to try that first. Later top-level rules may begin with a leading space; you can delete that space after copying.
Compacting CSS for a paste or a fixture
Minify strips comments and most extra whitespace so the sheet sits on fewer lines. Check quoted values afterward, because spaces next to : or ; inside a string can disappear.
Normalizing indent before a review
Beautify is useful when two copies of a file wrap differently. It will not sort properties, expand shorthands, or fix invalid CSS. For a script rather than a stylesheet, use the JavaScript Formatter.
How formatting works
Empty or whitespace-only input leaves the output empty. Beautify collapses whitespace first, then inserts breaks at braces and semicolons while skipping the inside of double- or single-quoted strings (after that first collapse). Minify removes comments, then squeezes space around punctuation. You can copy the result when it is present.
.button:hover{color:#fff;background:#2563eb}
.button:hover {
color:#fff;
background:#2563eb
}The last declaration has no semicolon because the input did not include one. After a colon, a space is kept only when it was already there, so this example has no space in color:#fff.
What this tool does not do
It does not parse CSS, preserve spaces inside strings during the first whitespace pass, or leave comments that contain braces untouched. Nothing is sent to a server. For Sass syntax, try the SCSS Formatter. To format the HTML around a style tag, use the HTML Formatter.
How to use CSS Formatter
- Paste your CSS, or use Load Sample for a short stylesheet.
- Choose Beautify to indent, or Minify to compact the text. In Beautify mode, pick 2- or 4-space indent.
- Copy the result when it looks right, or Clear to start over.
Frequently asked questions
Does this page parse CSS?
No. Beautify and Minify are character rewrites around braces, semicolons, and colons. Selectors, media queries, and pseudo-classes are left as text; they are not understood as CSS. Invalid input is still rewritten. There is no syntax check and no Prettier or cssnano engine.
What does Beautify change?
It first collapses all whitespace, including spaces inside strings and comments, into single spaces. It then walks the text, tracking quoted strings, and inserts line breaks and 2- or 4-space indent (default 2) at {, }, and ;. A colon keeps a following space only when one was already there, so color:red stays color:red. Comments are not parsed; a comment that contains { or } can be split into fake rules.
Why is there a leading space before later rules, or a missing semicolon?
After a top-level closing brace, a space that sat between rules is kept, so the next selector may start with a leading space. Beautify also does not insert a semicolon if the original rule omitted the last one. Inside a nested block, a leftover indent can appear before the closing brace. These are limitations of the rewriter, not CSS requirements.
What does Minify change?
It removes /* */ comments, collapses whitespace, strips space around {, }, :, and ;, and drops a trailing semicolon immediately before a closing brace. Strings are not parsed, so a value such as "a; b" or "foo : bar" can lose the spaces inside the quotes.
Is my CSS sent to a server?
No. Formatting runs in your browser as you type. Closing the tab discards what you pasted. Do not paste stylesheets that contain secrets if you would not be comfortable with them sitting in memory on this device.
Is there a file size limit?
There is no server-imposed limit, because nothing is uploaded. A few thousand lines is comfortable. A very large stylesheet can make the tab feel slow; in that case, format a smaller excerpt or use a local tool.
Related tools and guides
References
- The CSS Syntax Module describes how a real CSS parser treats comments, strings, and declarations. This page does not implement that parser.
- Editor tools such as Prettier parse CSS and leave string contents and comments alone. Use one of those when this rewriter would change a value or split a comment.