CSS & SCSS Formatter & Beautifier
A CSS beautifier and formatter: format, beautify or minify CSS and SCSS online. Indent nested rules and selectors, sort top-level rules alphabetically, and minify stylesheets by removing comments and whitespace.
Sort rules reorders top-level rules only: @charset, @import and other statements without braces stay where they are, and an @media block moves as one unit.
What does a CSS formatter do?
CSS describes how HTML is displayed; the W3C publishes it as a set of modules, starting with CSS Syntax Module Level 3. SCSS is the main syntax of Sass, a superset of CSS that adds variables, nesting, mixins and functions, and is compiled to plain CSS. Stylesheets taken from a minified bundle, a build tool or browser developer tools often lose their layout. A formatter puts each rule, selector and declaration back on its own line, which makes a stylesheet easier to scan and a missing brace easier to find. This page uses Prettier 3 with its PostCSS-based parser, loaded from cdn.jsdelivr.net.
How to use the CSS formatter
- Paste a stylesheet into the Input pane, or load it with File or URL (your browser fetches the address directly, so the remote server must allow cross-origin requests).
- Set Language to CSS or SCSS, choose an Indent, and tick Sort rules (A-Z) if you want top-level rules reordered.
- Click Beautify or Minify.
- Use Copy, or Download to save the result as
formatted.cssorformatted.scss, depending on the Language setting.
Options explained
- Beautify formats with Prettier: one declaration per line, a space after each colon, a semicolon after every declaration, and each selector in a comma-separated list on its own line. Nested rules and
@mediablocks are indented. - Minify does not use Prettier. It deletes
/* */comments (except licence comments that start with/*!, which are kept), removes whitespace around{ } ; ,and after:, drops the last semicolon in each block and collapses the remaining whitespace to single spaces. Strings, unquotedurl()values and escapes are copied unchanged, and a space before:is only removed inside declarations, so a selector such asa :hoverkeeps its meaning. - Language picks Prettier's
cssorscssparser for Beautify, and the extension of the downloaded file. With SCSS, Minify and Sort rules also treat//as a line comment (Minify removes it) and leave#{…}interpolation intact. With CSS,//is left alone, because it is not a comment in CSS. - Sort rules (A-Z) splits the stylesheet into top-level items and sorts rules by the text before their first
{, ignoring case. It runs before Beautify or Minify. Statements without braces, such as@charset,@importor an SCSS variable, stay where they are, as do@mixin,@functionand@layer, whose position matters; rules are sorted within each run between them. A comment directly before a rule moves with it, and an@mediablock moves as one unit, with its contents unsorted. Braces inside strings and comments are ignored. - Indent sets 2 spaces, 4 spaces or a tab for Beautify.
What Beautify changes
Besides layout, Prettier makes a few small normalisations. In testing with Prettier 3 it lower-cases hex colours (#FFF becomes #fff) and removes empty declarations such as a doubled ;;. It leaves keyword case (RED), units (0px) and the order of declarations alone. None of these changes alters which styles apply.
Limitations of Sort rules and Minify
Both features read the stylesheet with a lightweight tokeniser that recognises strings, comments, url() values and escapes, not a full CSS parser, so check their output on anything important:
- Sorting can change the cascade. When two selectors have the same specificity and set the same property, the later rule wins. Reordering rules can change the winner.
- Minify does not optimise values. It only removes comments and whitespace: colours, units and zero values are left as written, and spaces around
>,+and~are kept (calc()needs them around+and-). - Set Language to SCSS for Sass files. With CSS selected, a
//comment is kept, and once everything is on one line a Sass compiler would treat the rest of the file as part of that comment.
Common errors and how to fix them
Prettier's parser is lenient: it formats nesting and // comments even with Language set to CSS. When it cannot parse the input, the message appears above the panes after "Invalid CSS:" or "Invalid SCSS:", followed by the error and its position as (line:column).
| Input | Message | Fix |
|---|---|---|
.a{color:red | CssSyntaxError: Unclosed block (1:1) | Add the missing }. The position points at the start of the unclosed block |
.a{color:red}} | CssSyntaxError: Unexpected } (1:14) | Delete the extra brace |
.a{content:"red} | CssSyntaxError: Unclosed string (1:12) | Close the quote |
.x-#{$k}{width:$v} with Language set to CSS | CssSyntaxError: Unknown word | Switch Language to SCSS |
Formatting does not check property names or values, so a typo such as colr: red passes. Browsers ignore declarations they do not understand.
Examples
| Input | Action | Output |
|---|---|---|
.btn{color:#fff;background:#4f46e5} | Beautify, CSS, 2 spaces | .btn { |
@media (max-width:600px){.nav{display:none}.a,.b{margin:0 auto}} | Beautify, CSS, 2 spaces | @media (max-width: 600px) { |
$brand:#4f46e5;.nav{a{color:$brand;&:hover{color:darken($brand,10%)}}} | Beautify, SCSS, 2 spaces | $brand: #4f46e5; |
.b{color:red}.a{color:blue} | Minify, Sort rules | .a{color:blue}.b{color:red} |
/* Buttons */ | Minify | .btn{color:#fff;padding:4px 8px} |
a :hover { color : red; } | Minify | a :hover{color:red}.note::before{content:"a ; b"} |
@import url("base.css"); | Minify, Sort rules | @import url("base.css");.btn{color:blue}.nav{color:red} |
$brand: #4f46e5; // primary | Minify, SCSS | $brand:#4f46e5;.logo{background:url(https://example.com/logo.svg);color:$brand} |
Frequently asked questions
Is my stylesheet uploaded anywhere?
No. Prettier's code is downloaded from cdn.jsdelivr.net, but formatting and minifying run in your browser and the page does not send your CSS to a server. The URL button makes your browser request the address you enter, nothing more.
When should I choose SCSS instead of CSS?
Choose SCSS for .scss files. Prettier's CSS parser copes with simple nesting and variables, but it rejects Sass interpolation such as #{$k} and does not lay out maps properly. With SCSS selected, Download also saves a .scss file.
Does sorting rules change how styles apply?
It can. CSS settles ties between selectors of equal specificity by source order, so moving rules can change which declaration wins. Sort only when your selectors do not overlap, and check the result.
Is the Minify output production-ready?
It is fine for quick jobs: it removes comments and whitespace while keeping strings, url() values and selectors intact. It does not shorten colours or values or merge rules, so build tools such as cssnano or Lightning CSS, which parse the stylesheet fully, produce smaller and better-tested output for production.
Does the formatter compile SCSS to CSS?
No. It reformats SCSS as SCSS. Variables, nesting and mixins stay as they are; compiling needs Sass itself.