What does the CSS minifier remove or change?

It removes optional whitespace, ordinary comments and empty semicolons. Besides that, it writes media-query keywords such as and, not and only in lowercase, writes nth-child formulas in short form such as 2n+1, and moves a /*! comment found inside a block to just before the outermost rule or block that holds it. It never merges properties, combines or reorders rules, shortens colors or rewrites numbers, so every declaration keeps its place in the cascade.

Will minifying break calc() or custom properties?

No. Spaces around + and - inside calc() stay, because CSS needs them there; spaces around * and / go, because it does not. A custom-property value is kept exactly from its first character to its last, because scripts can read that text. The spaces before and after the value are the only part removed, and a value made only of spaces keeps them.

How is each result checked?

The output is parsed again with css-tree and compared with your input: the same rules, selectors, declarations and values in the same order; the same custom-property values, strings, url() values and attribute values, character for character; and the same /*! comments. If anything differs, no result is shown and your CSS is left as it was. The comparison is of parsed CSS, not of rendered pages, so test visual changes in the browsers you support.

What happens with invalid CSS?

Unclosed braces, brackets, strings, comments and url() values stop the run, and each problem is listed with its line, its column and a Select button that selects that spot in the source. Parts css-tree cannot parse, such as old Internet Explorer filter values or a Sass variable, are listed as warnings and are not rewritten: Minify keeps them exactly as written, and Format lets Prettier adjust only their spacing, number style and the letter case of units and hex colors. In Format mode Prettier can refuse text it cannot read; the message says where, and Minify, which keeps such parts as written, can be used instead.

What does Format change besides indentation?

Prettier also writes hex colors, units, property names, at-rule names, pseudo-classes and !important in lowercase, puts a space after colons and commas, and writes numbers in a standard form, such as 0.5 for .5 and 1.5 for 1.50. Custom-property values, strings, url() values and attribute values are put back exactly as you wrote them. You choose 2 spaces, 4 spaces or tabs and a line width of 80, 100 or 120, and the result is formatted again until it stops changing, so running Format twice gives the same output.

Does it support CSS nesting?

Yes. Nested rules are read with or without a leading &, for example .card { .title { } } and .card { &:hover { } }, including a nested rule that starts with a combinator such as > .meta.

Is there a size limit, and is my CSS uploaded?

Each run accepts up to 1,048,576 bytes (1 MB) of CSS and stops after 60 seconds; Cancel stops it sooner. A larger stylesheet can be split and run in parts. The work happens in a background worker in your browser tab. Your CSS is not uploaded or saved; only the mode, indent, width and line settings are remembered in this browser.

CSS Minifier and Formatter

Paste or open up to 1 MB of CSS, then format it with Prettier 3.9.8 or minify it with css-tree 3.2.1. Minify removes optional whitespace, ordinary comments and empty semicolons, and never merges properties, combines rules or reorders the cascade. Custom-property values, strings, url() values and /*! license comments keep their exact text. Before a result is shown it is parsed again and compared with your input, and a byte count and a line diff show what changed. Unclosed braces, strings, comments and url() values are refused with their line and column.

CSS sourceup to 1 MB

Output

The formatted or minified CSS appears here after it passes the check.

Cascade order keptCustom values keptByte change shown

Mode

Indent

Line width

Open .css file

Up to 1,048,576 bytes (1 MB) per run. Your CSS stays in this browser tab and is not saved; only the mode, indent, width and line settings are remembered.

What Minify keeps

calc() operatorsSpaces around + and - stay; * and / need none.
.a{width:calc(100% - var(--gap)*2)}
Custom propertyOnly the spaces around the value go.
:root{--shadow:0 1px 2px rgba(0,0,0,.2) , 0 8px 24px #0003}
CommentsA /*! comment stays; ordinary comments go.
/*! MIT licence */.a{color:red}
Nested ruleRead with or without a leading &.
.card{.title{color:red}}

Each run parses your CSS with css-tree 3.2.1, writes it with Prettier 3.9.8 (Format) or css-tree (Minify), then parses the result again and compares its rules, selectors, values, strings, url() values, custom properties and /*! comments with your input. A result that differs is withheld. Everything runs in a background worker in this tab, and nothing is uploaded.

Common questions

What does the CSS minifier remove or change?: It removes optional whitespace, ordinary comments and empty semicolons. Besides that, it writes media-query keywords such as and, not and only in lowercase, writes nth-child formulas in short form such as 2n+1, and moves a /*! comment found inside a block to just before the outermost rule or block that holds it. It never merges properties, combines or reorders rules, shortens colors or rewrites numbers, so every declaration keeps its place in the cascade.
Will minifying break calc() or custom properties?: No. Spaces around + and - inside calc() stay, because CSS needs them there; spaces around * and / go, because it does not. A custom-property value is kept exactly from its first character to its last, because scripts can read that text. The spaces before and after the value are the only part removed, and a value made only of spaces keeps them.
How is each result checked?: The output is parsed again with css-tree and compared with your input: the same rules, selectors, declarations and values in the same order; the same custom-property values, strings, url() values and attribute values, character for character; and the same /*! comments. If anything differs, no result is shown and your CSS is left as it was. The comparison is of parsed CSS, not of rendered pages, so test visual changes in the browsers you support.
What happens with invalid CSS?: Unclosed braces, brackets, strings, comments and url() values stop the run, and each problem is listed with its line, its column and a Select button that selects that spot in the source. Parts css-tree cannot parse, such as old Internet Explorer filter values or a Sass variable, are listed as warnings and are not rewritten: Minify keeps them exactly as written, and Format lets Prettier adjust only their spacing, number style and the letter case of units and hex colors. In Format mode Prettier can refuse text it cannot read; the message says where, and Minify, which keeps such parts as written, can be used instead.
What does Format change besides indentation?: Prettier also writes hex colors, units, property names, at-rule names, pseudo-classes and !important in lowercase, puts a space after colons and commas, and writes numbers in a standard form, such as 0.5 for .5 and 1.5 for 1.50. Custom-property values, strings, url() values and attribute values are put back exactly as you wrote them. You choose 2 spaces, 4 spaces or tabs and a line width of 80, 100 or 120, and the result is formatted again until it stops changing, so running Format twice gives the same output.
Does it support CSS nesting?: Yes. Nested rules are read with or without a leading &, for example .card { .title { } } and .card { &:hover { } }, including a nested rule that starts with a combinator such as > .meta.
Is there a size limit, and is my CSS uploaded?: Each run accepts up to 1,048,576 bytes (1 MB) of CSS and stops after 60 seconds; Cancel stops it sooner. A larger stylesheet can be split and run in parts. The work happens in a background worker in your browser tab. Your CSS is not uploaded or saved; only the mode, indent, width and line settings are remembered in this browser.

No unsafe property merging or reordered cascade; unsupported syntax is retained or rejected explicitly. Every result is parsed again and compared with your input before it is shown, and custom-property values, strings, url() values and /*! comments keep their exact text. It cannot see your HTML or test rendering, so check the result in the browsers you support.