UUID Generator
Generate cryptographically random version 4 UUIDs in bulk.
CSS Formatter
Re-indent a stylesheet, or strip it back to one line.
Quick Tool Overview
The CSS Formatter re-indents a stylesheet by walking it character by character, so a semicolon inside a data URI or a brace inside a string is treated as content rather than as syntax. Nested at-rules are indented properly.
- What it does
- Re-indents or minifies a stylesheet
- You give it
- CSS, minified or inconsistently formatted
- You get back
- Readable CSS with consistent spacing
- Best for
- Reading a minified file and tidying hand-edited CSS
About the CSS Formatter
Paste a stylesheet and get it back readable: one declaration per line, a space after every colon, nested at-rules indented and a blank line between top-level rules. Selector lists go one per line, which is how a stylesheet is actually written.
The formatter walks the file character by character rather than matching patterns, which is what makes it safe on real CSS. A semicolon inside a data URI does not end a declaration, a brace inside a string does not open a block, and a comment containing either is copied through untouched. Comments can be kept or stripped, and @media, @supports and @layer blocks are indented properly rather than flattened.
Key features of the CSS Formatter
Safe on real stylesheets
A data URI full of semicolons, a string containing a brace, a comment containing either — all copied through untouched, because the formatter tracks context.
At-rules nested
@media, @supports, @layer and @container blocks are indented with their contents at any depth rather than flattened.
Selector lists split
One selector per line, which is the convention and makes a long list reviewable.
Spacing normalised
A space after every colon in a declaration — but never inside a pseudo-class or a data URI, where it would break things.
Comments optional
Keep them for a file people read, drop them for a build artefact.
How to use the CSS Formatter
-
1
Paste your CSS
A minified file, a fragment, or something hand-edited into inconsistency.
-
2
Choose the indentation
Two spaces, four spaces or a tab, to match your project.
-
3
Decide about comments
Keep them for a file people read, strip them for a build artefact.
-
4
Copy the result
Take it to your clipboard or download it as a .css file.
Frequently asked questions
No. The formatter tracks strings and parentheses, so a semicolon or a brace inside url() or a quoted value is treated as content rather than as syntax.
No. Only whitespace changes. Property order can matter — shorthand before longhand, for one — so reordering would risk altering what the stylesheet does.
Yes. @media, @supports, @layer and @container blocks are indented with their contents, at any depth.
Yes, with the minify option, though the dedicated CSS Minifier does a more thorough job by also collapsing colours and shorthand.
Reviews of the CSS Formatter
What people who use the CSS Formatter think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the CSS Formatter. It takes half a minute and no account.
Write the first reviewMore developer tools
JSON to Rust Struct
Generate serde-ready Rust structs from a sample JSON document.
JSON to XML
Convert JSON into XML, with control over attributes, arrays and the root element.
Password Strength Checker
Estimate how long a password would survive, and see exactly what weakens it.
Data URI Generator
Turn text, SVG or a small file into a data: URI you can inline anywhere.
ISO 8601 Converter
Convert a date into every ISO 8601 form, including week and ordinal dates.
JSON Flattener
Collapse nested JSON into one flat level of dot-notation or bracket keys.
CSP Generator
Build a Content-Security-Policy header directive by directive.