CSS Formatter
Format, minify and alphabetically sort CSS
CSS Input
Result
What is a CSS Formatter?
A CSS Formatter is a tool that transforms unformatted or hard-to-read CSS (Cascading Style Sheets) into a clear, indented representation. Especially with large stylesheets or CSS combined from different sources, a formatter helps you recognize the structure and hierarchy of selectors and rules at a glance. This tool uses Prettier, the widely adopted code formatter, to deliver consistent and professional results. Optionally, CSS properties within each rule can be sorted alphabetically for even better readability.
How do I use the CSS Formatter?
Paste your CSS into the input field and click "Format" for a nicely indented display, or "Minify" to remove all unnecessary whitespace, line breaks, and comments. Enable the "Sort properties alphabetically" option if you want the CSS properties within each rule in alphabetical order. You can copy the result to your clipboard with a single click.
Why format CSS online?
Well-formatted CSS is easier to read, debug, and maintain. Minification reduces file size and improves your website's load time. Alphabetical sorting of properties makes it easier to find duplicate declarations and ensures a consistent appearance across your team. Since the tool runs entirely in your browser, no data is sent to any server. Your code remains private and secure on your device.
More Tools
Also try our HTML Formatter for HTML code, the JavaScript Formatter for JS, or the Color Converter for HEX/RGB/HSL values.