What you see
The code is formatted first, then drawn with line numbers and colors, so the structure is easy to follow:
- Purple: at-rules such as @media, @import and @keyframes, and !important.
- Amber: selectors.
- Blue: strings and url() values.
- Orange: numbers, units and hex colors.
- Gray italic: comments.
Why line numbers help
Error messages and code review comments usually point to a line. When you pretty print the CSS first, line 214 is the same line for everyone who looks at the result, which is not true of a minified file where everything is line 1. The CSS formatter gives the same layout as plain text, which you can edit.
Copy a clean version
The Copy button copies the code as plain text, without line numbers or colors. The only formatting options on this page are the indent and the blank lines between rules. For all other options, use the formatter.
Good for
- Reviewing a pull request or a snippet that was pasted into a chat.
- Learning how a stylesheet is organized.
- Showing CSS in a tutorial or a ticket with a clear layout.
Related tools: the CSS beautifier for minified input, the CSS minifier and CSS compressor for the opposite job, and the JavaScript pretty print for scripts. The CSS formatting guide explains common conventions.