Format, Sort & Minify CSS
Turn minified or messy stylesheets into clean, readable CSS with proper indentation, property sorting, color normalization, and modern feature support — or minify back down with one click. All processing happens in your browser.
CSS Beautifier
Formatting Options
Properties & Values
Warnings
Press Ctrl+Enter to beautify · Ctrl+Shift+M to minify
What this tool does not do
- Reports unbalanced braces, unclosed strings, or unclosed comments as warnings, but does not silently remove or auto-fix them.
- Does not add vendor prefixes or rewrite stylesheet semantics.
- Very large stylesheets (over ~5 MB) may take a few seconds to process.
How It Works
Paste your CSS
Enter or paste minified or messy CSS into the input area.
Choose options
Pick indent, braces, empty lines, property sorting and grouping, and color normalization from the settings panel.
Format or minify
Beautify your stylesheet with one click, or minify it for production. Statistics and byte savings are shown instantly.
Frequently Asked Questions
What does the CSS beautifier do?
It formats minified or messy CSS by adding proper indentation, line breaks, and structure, making stylesheets readable and maintainable. It can also minify CSS back down for production.
Can I sort or group CSS properties?
Yes. Sort properties alphabetically, group them by category (positioning, box model, typography, visual, animation), move custom properties to the top, or keep vendor prefixes and shorthands together.
Does it support modern CSS?
Yes. Nesting, @layer, @container, @scope, @property, color-mix, oklch, calc, custom properties, anchor positioning, and other modern features are preserved and formatted correctly.
Can I normalize color values?
Yes. Convert colors to hex, RGB, or HSL, lowercase hex values, remove zero units, or remove leading zeros — all without breaking modern color functions.
Is my CSS uploaded to a server?
No. All processing happens entirely in your browser. Your code never leaves your device.