CSS Formatter
Give every CSS declaration its own line, indent nested at-rules, normalize hex colors and minify without corrupting strings.
CSS has a forgiving syntax and that is exactly the problem: rules pile up on one line, selectors chain into walls, and color values vary between #FFF and #ffffff depending on mood. This formatter gives every declaration its own line, aligns selector lists, and normalizes hex colors to lowercase so a stylesheet reads consistently end to end.
Nested at-rules are handled properly: @media, @supports, @keyframes, @layer and @container blocks are indented, and the rules inside them follow the same one-declaration-per-line layout. Pseudo-classes like .nav:hover and :not(.x) are preserved as written, never split at the colon.
Minify mode squeezes the whole stylesheet onto minimal lines with comments removed, and the formatter adds a missing semicolon before a closing brace so a hand-trimmed rule stays valid. Everything runs locally in your browser.
Because the output is deterministic - the same input always produces the same text - formatting becomes a repeatable step in your workflow instead of a judgment call. Paste the same stylesheet tomorrow and you will get the same result today, which keeps diffs clean when a team agrees on one set of options.
Features
- One declaration per line with consistent indentation.
- Nested at-rules - @media, @supports, @keyframes, @layer, @container - indented correctly.
- Selector lists (.a, .b) break onto separate lines at the top level.
- Optional lowercase hex normalization (#FFF becomes #fff).
- Minify removes comments and compresses whitespace.
- Unbalanced-brace errors report the line where the block was opened.
How to Use
- 1
Paste the stylesheet
Drop any CSS text into the input; a single rule, a full sheet or an inline style attribute value all work.
- 2
Tweak the options
Leave lowercase hex on to normalize colors, or turn it off to preserve the original spelling of every value.
- 3
Format or minify
Press Format for the readable layout, or switch to Minify for a compact version of the same stylesheet.
- 4
Copy or download
Take the result to your clipboard or download it as a .css file.
Example
Before
.a{color:#AABBCC;margin:0}.a:hover{color:red}↓
.a {
color: #aabbcc;
margin: 0;
}
.a:hover {
color: red;
}Common Problems
Missing semicolons
A declaration without a trailing semicolon before the closing brace is terminated for you, so .a{color:red} becomes color: red; instead of a rule the browser silently drops.
Unclosed brace
If a { is never closed, the formatter reports the line it was opened on instead of producing garbage output that is hard to trace.
Hex color case
#AABBCC and #aabbcc are the same color but look inconsistent side by side in a file; lowercase hex normalization makes them uniform.
Pseudo-class colons
The colon in .nav:hover or :not(.x) is a selector colon, not a declaration colon, and the formatter knows the difference - so it never inserts a space that would break the selector.
Media query commas
Commas inside parentheses, such as @media (min-width: 600px), (max-width: 900px), are kept inline, while top-level selector commas break the line.
Custom properties
Custom properties like --brand-color are recognized as declaration starts, so they get the same one-per-line treatment as any normal property.
Inline style attribute values
Paste the value of a style attribute, such as color: red; margin: 0, and the formatter treats it as a declaration block with no surrounding selector.
Strings stay intact
Quoted content like content: "a;}" is preserved exactly; the minifier never strips a semicolon or brace that lives inside a string.
Long shorthand values
Long property values such as font or background shorthands stay on the declaration line and are never wrapped mid-value, because splitting them across lines would change how the browser reads them.
Technical Details
The tokenizer classifies CSS into comments, strings, braces, semicolons, commas, colons and text runs, tracking the line of every token so errors can point at the exact spot.
The re-emitter keeps a stack of open blocks tagged as nested at-rules or declaration blocks; selector text is flushed before each {, and a missing trailing semicolon is appended when a declaration block closes.
Colon handling decides between a declaration colon (spaced, color: red) and a selector colon (unspaced, .nav:hover) by checking whether the current line already looks like a property name, which is what keeps pseudo-classes intact.
Parenthesis tracking keeps media-query commas inline: a top-level comma breaks the line, but a comma at paren depth one or deeper is a list separator and stays in place.
Minify removes comments, drops the semicolon before every closing brace, and adds a space only where a token boundary actually needs one, producing the smallest safe output.
Declarations are flushed one at a time, so each property and value pair occupies its own line and a trailing semicolon is added only at the closing brace of a block, never inside a nested at-rule.
All processing is synchronous and local. No stylesheet text is ever transmitted, stored or logged.
Frequently Asked Questions
Will this change the colors in my file?
Only if you leave lowercase hex on: #AABBCC becomes #aabbcc. The value is identical in the browser; only the spelling changes. Turn the option off to preserve original case.
Why is my pseudo-class split?
It should not be. .nav:hover and :not(.x) are preserved without spaces. If you see a split, the input already contained the space and it was carried through.
Does it add semicolons?
Only the one that is safe to add: the final declaration before a closing brace. Everything else is left exactly as written.
Can it handle @keyframes?
Yes - keyframes, media queries, supports, layer and container blocks are nested at-rules, and their inner selectors (from, to, percentage steps) are indented like any other rule. Steps such as 0%, 50% and 100% are recognized as valid keyframe selectors, not treated as malformed declarations.
What if I paste a style attribute?
A declaration block without a surrounding selector is formatted as declarations only, which is useful for the inline style attribute of an element.
Is my CSS uploaded?
No. Formatting happens entirely in the browser; nothing is transmitted or stored, which matters for proprietary stylesheets and for files containing internal class names you do not want recorded.
Does minify break anything?
Strings are preserved exactly and the redundant semicolon before a closing brace is removed; nothing else in a value is altered.
Data & Privacy
Your data stays in your browser. Nothing is uploaded.
- Processing
- Local
- Upload
- None
- Server Storage
- None
- Account
- Not required
Related Tools
SQL Formatter
Beautify messy SQL with clause-aware indentation, choose UPPER or lower keywords, and minify a query to a single line.
Code & Formatting
HTML Formatter
Re-indent HTML by nesting depth, keep inline elements flowing, and minify without corrupting pre and script content.
Code & Formatting
JavaScript Formatter
Normalize JS indentation, spacing and brace layout - or minify it - while preserving your semicolons, quotes and structure.
Code & Formatting
Markdown Preview
Live Markdown preview with GFM tables, fenced code and nested lists - plus copy or download the generated HTML.
Code & Formatting
Hex Converter
Convert text to hex bytes and back, revealing the UTF-8 representation of any string.
Encoding & Conversion
HTML Entity Encoder / Decoder
Convert HTML to its escaped entity form or decode entities back to readable markup.
Encoding & Conversion