CSS Formatter
Beautify or minify CSS code with proper formatting.
How It Works
The CSS Formatter processes your CSS code character by character, understanding the structure of selectors, properties, values, and at-rules. In beautify mode, it applies consistent formatting: each selector gets its own line, properties are indented within braces, and spaces are added around colons and after semicolons for readability.
In minify mode, all comments, unnecessary whitespace, line breaks, and trailing semicolons are removed to produce the smallest possible output. This can significantly reduce file size for production deployments.
The tool handles nested rules (like media queries and CSS nesting), preserves string literals and URL values, and correctly processes CSS comments. All processing happens in your browser.