CSS Formatter & Minifier

Format messy CSS with proper indentation, or minify it to reduce file size. Optionally sort properties alphabetically and add vendor prefixes. Browser-based.

css-formatter.tool
Indent:
Input CSS
Output

Beautify vs Minify CSS

Beautifying CSS adds consistent indentation, line breaks after each property and blank lines between rules — making it easy to read, edit and maintain. Minifying does the opposite: removes all whitespace, comments and unnecessary characters to produce the smallest possible CSS file for production deployment.

Sorting Properties Alphabetically

Alphabetically sorted properties make large CSS files easier to navigate — you always know exactly where to find a property. It also makes diffs cleaner in version control and helps spot duplicates. The sort option reorders all declarations within each rule while leaving the rule order itself unchanged.

Vendor Prefixes

Some CSS properties still require vendor-prefixed versions for broader browser compatibility. The vendor prefix option adds -webkit-, -ms- and -moz- variants for properties like transform, transition, animation and user-select where they are commonly needed.

Frequently Asked Questions

No. Minification only removes whitespace, comments and unnecessary characters — it never changes property values, selector specificity or rule order. The rendered output in any browser is identical to the original.
Minification is done at the file level — removing whitespace. Compression (gzip/brotli) is done at the server transport level — encoding the file for smaller transfer. They stack: minified CSS compresses better than formatted CSS. Both together give maximum savings.
It is a style preference, not a requirement. Sorted properties appeal to teams that prioritise consistency — it eliminates arguments about order and makes code review easier. Performance-wise there is no difference. The most important thing is picking one convention and sticking to it.
Most modern properties no longer need prefixes. But some properties — particularly -webkit-appearance, -webkit-backdrop-filter and certain text properties — still have inconsistent support without prefixes on older Safari versions and iOS browsers. Adding prefixes defensively for these specific properties costs almost nothing and avoids breakage on older devices.
Yes — click the Upload button and select any .css or .txt file. The file contents load into the input box and you can format or minify normally. Output can be downloaded as a .css file using the Download button.
It is a warning sign. Overusing !important indicates specificity problems — usually caused by overly generic selectors or inline styles that needed overriding. The formatter shows the structure clearly so you can spot the issue. Refactoring to eliminate !important produces more maintainable CSS.

Related Tools

</>
HTML Formatter
Format & minify HTML
JS
JS Formatter
Beautify JavaScript
◑
CSS Gradient
Build CSS gradients
🎨
Contrast Checker
WCAG colour contrast