CSS Beautifier
Beautify, minify, and validate CSS. Sort properties, normalize hex colors, configure indent. All in your browser.
About this tool
Well-formatted CSS is self-documenting: one selector per line, one
property per line, consistent indent, and tidy hex colors. Minified CSS
is the opposite: every byte squeezed out for production. This tool does
both, running entirely in your browser using js-beautify
for the core parsing.
Use Beautify when you receive a minified stylesheet
and need to read it, or when you want to normalize a stylesheet that
multiple developers have touched. Use Minify for a
quick production build when you do not have a full CSS pipeline set up.
Real-world minifiers like cssnano do more — merging
identical rules, removing unused properties, combining selectors — but
the simple minifier here removes comments and collapses whitespace,
which is 80% of the savings.
The Sort properties option alphabetizes declarations within each rule block. This is controversial: some teams prefer grouped sorting (box-model first, then layout, then typography), some prefer logical grouping per rule, some prefer strict alphabetical. Alphabetical is the easiest to enforce automatically because it needs no judgment. Linters like Stylelint can enforce any of these.
The Hex case dropdown normalizes color literals.
Lowercase is standard in modern codebases. Shorten
collapses #ffffff to #fff where lossless, a
small byte-saving. The Trailing semicolon option
controls whether the last declaration before a closing brace has a
semicolon — adding one is defensive (accidental future insertions do
not break the rule), omitting saves a byte.
Validation uses the browser’s native CSSStyleSheet.replaceSync
which parses with the same engine your browser uses — so bugs caught
here are guaranteed to show up in production. Expect to see rules
silently dropped by older browsers if you use new features; for
comprehensive CSS validation across browser engines, use the W3C CSS
Validation Service.
Frequently asked questions
Does beautifying preserve comments?
Yes. The beautifier retains all comments in their original positions. The minifier strips standard /* … */ comments but keeps /*! … */ comments by convention — those are often license banners that must survive minification.
Should I sort properties alphabetically?
It depends. Alphabetical sorting is popular in design system codebases because it gives every file a predictable shape, making diffs cleaner. Grouped sorting (layout → typography → visual) tells a better story but is harder to enforce. Both are valid; consistency within a codebase matters more than the specific rule.
Does shortening hex colors change the value?
No. #FFFFFF and #FFF are the same color — three-digit hex expands to six by duplicating each character. The tool only shortens colors that can be shortened losslessly (each pair of characters matches). Colors like #C2E7F1 are left alone because #C2E7F1 ≠ #CEF.
Does this strip vendor prefixes like -webkit-?
No. Vendor prefixes stay as you wrote them. The rule is: prefixed versions first, unprefixed last. Removing still-needed prefixes breaks older browsers; adding missing ones is a job for Autoprefixer, not a formatter.
Do I need source maps?
For a tool like this that transforms single files, source maps are not generated — there is no build step. For a production CSS pipeline (PostCSS, cssnano, Sass), source maps are essential: they let the browser DevTools show the original source when inspecting styles. This tool is for one-off formatting, not a build replacement.