Correctly handles all CSS constructs: selectors, rule blocks, at-rules (@media, @keyframes, @supports), comments, and nested rules with proper indentation.
Output is colour-coded: selectors, property names, values, at-rules, comments, CSS custom properties, and colour literals are all visually distinct, making the formatted code easy to scan.
The Minify button strips all whitespace, comments, and unnecessary semicolons from your CSS — ideal for checking what a bundler will produce, or for quickly minifying small snippets.
All CSS formatting happens entirely in your browser. Nothing is sent to any server. Your code stays private and the tool works offline.
A CSS formatter takes raw or minified CSS and reformats it with consistent indentation, spacing, and line breaks for readability. It does not change how styles are applied — only their visual structure for developers.
No. Browsers parse CSS the same way whether it is minified or beautifully indented. Only the developer experience changes. Formatted CSS is far easier to read, debug, and maintain.
Yes. CSS custom properties like --primary-color: #00e5b8 are handled correctly and highlighted with a distinct colour in the output.
Yes. All at-rules including @media, @keyframes, @supports, @import, and @font-face are supported. Nested rules are indented an extra level automatically.
CSS minification removes all unnecessary whitespace and comments to reduce file size, improving page load speed. This tool's Minify button lets you preview the minified output before deploying.