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.

Can I open a large CSS file, and is it uploaded?

There is no fixed input-byte ceiling; your device’s memory is the practical limit. A run stops after 60 seconds, and Cancel stops it sooner. The source stays in this browser tab and is not saved. A long output is shortened only in the on-screen preview; Copy output and Download CSS contain the complete result. Only settings you explicitly choose are remembered.

How do I unminify or beautify a one-line CSS file?

Choose Format, paste the minified stylesheet or open its .css file, then run Format CSS. Choose 2 spaces, 4 spaces or tabs and a line width. The formatted CSS and complete line diff can be downloaded. Unminifying restores readable layout, not deleted comments, pre-minification names or a source map.

Is CSS compression the same as minification?

Here, CSS compression means removing optional source whitespace and ordinary comments in Minify mode. It does not create a gzip or Brotli archive, rewrite the cascade, merge selectors or configure your web server.

Can it format Sass, SCSS or CSS inside HTML?

It handles standalone standard CSS, including standard CSS nesting. It is not a Sass/SCSS compiler or a complete preprocessor formatter, and it does not extract style blocks from HTML or process JavaScript. Some unreadable value syntax can be retained with warnings; this does not establish full preprocessor support. Use the separate HTML and JavaScript formatters for those source languages.

CSS Minifier and Formatter

Paste or open a standalone CSS file, 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. Format also beautifies or unminifies one-line CSS for reading; it cannot restore comments deleted by a minifier or reconstruct a missing source map.

CSS sourceruns in your browser

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

Your device's memory is the practical size limit. A run stops after 60 seconds, and Cancel stops it sooner. Your CSS stays in this browser tab and is not saved; only the settings you choose 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.
Can I open a large CSS file, and is it uploaded?: There is no fixed input-byte ceiling; your device’s memory is the practical limit. A run stops after 60 seconds, and Cancel stops it sooner. The source stays in this browser tab and is not saved. A long output is shortened only in the on-screen preview; Copy output and Download CSS contain the complete result. Only settings you explicitly choose are remembered.
How do I unminify or beautify a one-line CSS file?: Choose Format, paste the minified stylesheet or open its .css file, then run Format CSS. Choose 2 spaces, 4 spaces or tabs and a line width. The formatted CSS and complete line diff can be downloaded. Unminifying restores readable layout, not deleted comments, pre-minification names or a source map.
Is CSS compression the same as minification?: Here, CSS compression means removing optional source whitespace and ordinary comments in Minify mode. It does not create a gzip or Brotli archive, rewrite the cascade, merge selectors or configure your web server.
Can it format Sass, SCSS or CSS inside HTML?: It handles standalone standard CSS, including standard CSS nesting. It is not a Sass/SCSS compiler or a complete preprocessor formatter, and it does not extract style blocks from HTML or process JavaScript. Some unreadable value syntax can be retained with warnings; this does not establish full preprocessor support. Use the separate HTML and JavaScript formatters for those source languages.

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.