CSS Formatter: beautify and minify CSS online
Input
Output
What is CSS?
CSS (Cascading Style Sheets) is the language that decides how a web page looks: colours, spacing, fonts, layout, and how all of it changes on a phone. A stylesheet is a list of rules, and each rule is a selector saying which elements it applies to, followed by declarations in braces saying what to do with them, like .btn { padding: 8px; }.
The “cascading” part is why order matters. When two rules set the same property on the same element, the more specific selector wins, and between equals the later one wins. That is also why this formatter never reorders anything.
Why use a CSS formatter?
CSS that ships to a browser is usually minified into one line, and CSS copied out of DevTools, an email template or an old project is often indented however its author felt that day. A formatter fixes both:
- Readability. One declaration per line and nested blocks indented, so you can see which rules sit inside which
@mediaquery. - Debugging. A missing brace makes every rule after it silently stop working. The error here names the line and column of the brace that was never closed.
- Size. Minifying removes comments, if you ask, and every space and line break the browser does not need.
Example
.btn,.btn-primary{padding:8px 16px;border-radius:8px;font:500 14px/1.4 "DM Sans",sans-serif}.btn:hover>svg{opacity:.8}@media (max-width:640px){.btn{width:100%}}.btn,
.btn-primary {
padding: 8px 16px;
border-radius: 8px;
font: 500 14px/1.4 "DM Sans", sans-serif;
}
.btn:hover > svg {
opacity: .8;
}
@media (max-width:640px) {
.btn {
width: 100%;
}
}With Selector Lists set to Same line and Blank Line Between Rules off, the same stylesheet is more compact:
.btn, .btn-primary {
padding: 8px 16px;
border-radius: 8px;
font: 500 14px/1.4 "DM Sans", sans-serif;
}
.btn:hover > svg {
opacity: .8;
}
@media (max-width:640px) {
.btn {
width: 100%;
}
}About Gradient Learning's CSS Formatter
It is free, needs no sign-up, and runs entirely in your browser: the stylesheet you paste is never uploaded, stored or logged, and the page keeps working if you go offline after it loads. The parser is PostCSS, the same one behind Autoprefixer, Stylelint and Tailwind, so it reads modern CSS, native nesting included.
It changes whitespace and nothing else. In particular:
- Order is kept. Rules and declarations stay exactly where they were, because in CSS moving one can change which style wins.
- Strings and URLs are copied as written. The
;and,inside a data URL, or the spaces in acontentstring, are left alone. - Custom properties are left as they are. The value of a
--variablecan be anything, so only the whitespace at its two ends is trimmed. - Grid areas keep their rows. A
grid-template-areaswritten one row per line stays that way, because that layout is how people read it.
How to use the tool
- Paste your CSS into the input panel on the left, or open a file.
- The formatted stylesheet appears in the output panel on the right as you type. There is nothing to click. If it cannot be parsed, a strip across the top of the output names the problem and its line and column; press the position to jump the cursor to it.
- Switch between Beautified and Minified, set the indentation, then use the copy or download button on the output panel.
Formatting options
Basic options (always visible)
| Option | What it controls | Possible values |
|---|---|---|
| Output | Whether to indent the stylesheet or strip it to one line | Beautified, Minified |
| Indentation | Width of one indent level in the beautified output | 2, 3 or 4 spaces, Tabs |
| Selector Lists | Whether each selector in a comma-separated list gets its own line | One per line, Same line |
Advanced options (under “More”)
| Option | What it controls | Possible values |
|---|---|---|
| Blank Line Between Rules | An empty line between each rule and at-rule block and the next | On (default), Off |
| Keep Comments | Whether /* comments */ are kept in the output | On (default), Off |
Frequently asked questions
Is the Gradient Learning CSS Formatter safe to use?
Yes. It runs entirely in your browser, so the stylesheet you paste is never uploaded, stored or logged, and the page keeps working if you go offline after it loads.
Will formatting change how my page looks?
No. Only whitespace changes. Rules and declarations stay in their original order, because in CSS the later of two equal rules wins, and moving one could change which style applies. Strings, url() values and custom property values are copied exactly as written.
Does it check my CSS for errors?
It reports anything that stops the stylesheet from being parsed: a brace that is never closed, an extra closing brace, an unclosed string or comment, and a missing colon or semicolon. You get one sentence saying what is wrong, the line and column, and a squiggle under it in the editor. It does not check whether a property or value is one browsers recognise, since browsers simply skip ones they do not.
Why does it say “Unknown word”?
It means the parser found a word where it expected a colon, a semicolon or a brace. The usual cause is a missing colon or a missing semicolon on the line before. Another is a // comment copied from SCSS or LESS: plain CSS only has /* */ comments.
Does it support SCSS, LESS or native CSS nesting?
Native CSS nesting, yes: a rule inside a rule is indented like any other block. SCSS and LESS are separate languages, and features such as // comments, variables with $ or @, and mixins are not supported.
What is the difference between beautifying and minifying?
Beautifying puts each declaration on its own line and indents nested blocks, so a person can read the stylesheet. Minifying removes every space and line break the browser does not need, and the last semicolon in each block, so the file is as small as possible. Neither changes what the CSS does.
Is there a size limit?
Not on what you paste, but a file you open has to be under 1 MB. Past that the editor itself becomes slow. Formatting runs in a background thread, so a large stylesheet does not freeze the page while it works.