CSS Formatter
Prettify or minify CSS with configurable indentation. Handles comments, media queries, nested selectors, and string values — free, browser-based.
CSS Input
How to format CSS
- Paste your CSS into the input area.
- Choose Prettify for readable formatting or Minify to strip whitespace for production.
- Set the indent size if prettifying.
- Click the button and copy the output.
Why format CSS?
Formatting turns dense or machine-generated CSS into something you can actually read. Consistent indentation and line breaks make it far easier to debug a stubborn rule, maintain a stylesheet over time, review changes with teammates, or make sense of minified CSS pulled from a build output or a third-party library.
Formatting vs minifying CSS
Formatting (prettifying) expands CSS with spacing and indentation for readability, while minifying strips comments and unnecessary whitespace to produce the smallest possible file for production. This tool does both — switch between Prettify and Minify at the top. For a dedicated minifier, see the CSS Minifier.
What this formatter does not do
The formatter only changes layout — spacing, indentation, and line breaks. It does not validate your CSS, fix syntax errors, rename properties, or change any values, so the styling behaves exactly as before. If the input contains malformed or incomplete rules, they are reformatted as-is rather than corrected, which can actually make a broken rule easier to spot.
Privacy — processed in your browser
All CSS formatting runs entirely in your browser using pure JavaScript string parsing. Your stylesheet is never sent to any server.
Frequently Asked Questions
Is a CSS beautifier the same as a CSS formatter?
Yes. "Beautifier" and "formatter" describe the same thing — taking compact or messy CSS and laying it out with readable indentation, spacing, and line breaks.
Can it format minified CSS?
Yes. Paste minified or single-line CSS and Prettify expands it back into a readable, indented stylesheet.
Does formatting change how my CSS works?
No. Prettifying only adds whitespace and line breaks. Selectors, properties, and values are untouched, so the formatted CSS renders identically to the original.
Does minification affect CSS behaviour?
No — CSS minification only removes whitespace and comments. It does not reorder rules, change selectors, or alter property values. The resulting CSS produces identical rendering to the original.
Does it validate or fix CSS errors?
No. This is a formatter, not a validator or linter. It does not check for or repair invalid CSS; malformed rules are reformatted as-is rather than corrected.
Can I choose tabs or spaces?
You can choose 2 or 4 spaces of indentation when prettifying. Tab indentation is not currently offered.
Can I upload a CSS file?
This tool works with pasted CSS — paste your stylesheet into the input box. There is no file upload or URL loading.
Can I download the formatted CSS?
You can copy the formatted or minified CSS to your clipboard with one click. There is no separate file download.
Is the CSS sent to a server?
No. All formatting and minifying run entirely in your browser with JavaScript string parsing — your stylesheet never leaves your device.
Does the formatter handle @media queries?
Yes — @media, @keyframes, @supports, and other at-rules are handled correctly with proper nested indentation.
Will it handle vendor-prefixed properties?
Yes — vendor prefixes like -webkit-, -moz-, and -ms- are treated as normal declarations.