CSS Formatter
Beautify or minify CSS stylesheets using Prettier.
About CSS Formatter
CSS Formatter beautifies messy or minified stylesheets into clean, consistently indented CSS using Prettier, and minifies them back when you want a smaller file. Use it when you've inherited a one-line production stylesheet or a bundle of inconsistent rules and need something readable. It runs in your browser, so your stylesheets are never uploaded.
- Category
- dev
- Input
- Accepts: text/css or text/plain.
- Output
- Outputs: text/css.
- Cost
- Free, runs in your browser
- Memory
- low
Common uses
- Expand a minified production CSS file you grabbed from a site so you can read the rules
- Standardize indentation and brace placement across a stylesheet before opening a pull request
- Minify a small CSS snippet to inline it into a single-file HTML demo
- Clean up CSS copied out of a browser inspector so each declaration sits on its own line
- Reformat a component's styles pasted from a chat message before adding them to your repo
- Normalize spacing in a third-party stylesheet so a diff against your overrides is readable
Frequently asked questions
What can I paste in?
It accepts CSS as text/css or plain text. Whole stylesheets and short snippets both format fine.
Beautify or minify?
Both. Beautify produces readable, indented CSS via Prettier; minify strips whitespace to shrink the file.
Does my CSS leave my device?
No. Everything runs locally in your browser, so the stylesheet and any URLs or selectors in it stay private.
Does it support modern CSS like nesting and custom properties?
Yes. Prettier handles current CSS syntax including custom properties, nesting, and at-rules, reformatting them without altering their meaning.
Will it change my values or selectors?
No. It only adjusts formatting. Property values, selectors, and the cascade order are preserved exactly.
Keywords
- css
- format
- beautify
- minify
- stylesheet
- pretty
- indent