CSS Formatter, Beautifier & Minifier

Paste your stylesheet (or load a file/URL), choose a Mode and press Format. Format runs prettier's CSS parser and re-prints in canonical style, reporting the exact position of anything it can't parse; Beautify runs js-beautify, which only re-indents and keeps working on truncated or minified CSS; Minify strips comments and whitespace and reports the byte saving in the status bar.

Pick by what you are holding. Format runs prettier: it re-prints the sheet exactly the way a repo with prettier in CI expects, which also means it normalises values (lowercased hex and units, leading zeros, double-quoted strings) and refuses to format a sheet it cannot fully parse. Beautify runs js-beautify: it only re-indents, never rewrites a value, and keeps working on CSS that is truncated or slightly broken. Format for source you own, Beautify for a minified bundle or a fragment copied out of DevTools, Minify when you want the compact form back.

Prettier normalizes tokens without changing meaning: hex colors are lowercased (#FDE68A becomes #fde68a, inside custom properties too), bare decimals gain a leading zero (.75rem becomes 0.75rem), units are lowercased (6PX becomes 6px), single-quoted strings become double-quoted, attribute selector values are quoted, and !important always gets a space before it. It never reorders declarations or rules, never shortens colors, and leaves var() and calc() expressions intact apart from spacing around operators.

Yes — multi-hundred-kilobyte sheets are fine, and js-beautify does not slow down on the aggressively minified output of Bootstrap or a Tailwind build. For very large bundles give the editor a second to render; the folding regions the editor adds keep navigation manageable afterwards. Because nothing is parsed into a tree, memory stays flat even on sheets that would make a strict formatter give up.

Comments that survived minification — typically /*! license */ banners — are kept exactly where they appear; nothing the minifier already removed can be recovered. What you do get is structure: a blank line between rules so the blocks are visually separable, selector lists split one selector per line, each declaration on its own line, and @media and @keyframes blocks re-indented at whatever width you pick in the rail. What you do not get is anything the minifier deleted from inside a rule — the semicolon it dropped before each closing brace is not added back, because nothing but whitespace is changed here.