CSS Minifier
Shrink CSS for production.
Input
Valid CSSLn 1, Col 170 lines, 1.19 KB
20% smaller (1.19 KB to 970 B)
A CSS minifier, beautifier and fixer in one page
Paste your CSS and it is checked as you type. You can minify it to save bytes, beautify a compressed file so you can read it, or pull the colors and fonts out of it. If something is broken, the tool shows exactly where and, in most cases, fixes it with one click.
- Minify with a real before and after. Press Minify and the output shows how many bytes you saved, for example 38% smaller. Comments and whitespace go, colors and numbers get shorter, and the last semicolon in each rule is dropped. Strings and
url()values are copied exactly as you wrote them. - Beautify minified CSS. Got a one-line
styles.min.cssand need to read it? Beautify puts every declaration on its own line with 2 spaces, 4 spaces or tabs. Nested@mediablocks are indented too. - Finds mistakes as you type. A missing
{,},;or:, an unclosed comment or string, a misspelled property and a stray comma in a selector list are flagged with the line and column. Browsers silently skip broken CSS, so these are the bugs that are hardest to spot by eye. - One-click fixes. Press Apply fix for one problem or Fix all for the lot. It can add a missing brace, semicolon, colon or comma, fix
colrtocolor, addpxto a bare number, and turn a//comment into a real one. Undo brings your original back. - Pull out colors, fonts and variables. Extract lists every color with a swatch and how often it is used, every font family, your
--custom-properties(and which ones are never used), media queries and@importrules. - Minify settings. Keep
/*!license comments, turn color and number shortening on or off, remove empty rules, and choose whether the last semicolon stays. - Size and structure stats. Compare the input, minified and beautified size and gzipped size, then see your rule, selector and declaration counts,
!importantuses and your most used properties.
How this CSS minifier compares with other online tools
Most online minifiers take your CSS in and hand a smaller file back. The table below describes what you usually get from a basic one and what this tool adds.
| Feature | Typical online minifier | This tool |
|---|---|---|
| Your code | Some tools send the CSS to a server to process it. | Everything runs in your browser. Nothing you paste or open is uploaded. |
| Mistakes | Minifies what it can, or fails with a vague error, or quietly drops the broken part. | Lists every problem with its line and column, and fixes most of them in one click. |
| Result | Gives you the output and nothing else. | Shows the percentage saved and the byte count before and after, including gzip. |
| Typos | Not noticed, because the property name is still valid-looking text. | Flags names that are not CSS properties and suggests the closest real one. |
| Reading minified files | A different tool, or not offered. | Same page and same input: switch from Minify to Beautify. |
| Finding things | Scroll or use the browser find box. | Lists of colors, fonts, variables, media queries and imports, each with a copy button. |
| Settings | Few or none. | License comments, color and number shortening, empty rules, last semicolon, and indent size. |
| Large files | The page slows down or the box cuts your text off. | Open files up to 25 MB, with undo, redo and a full screen editor. |
How to minify and fix CSS
- Paste your CSS into the Input box, drop a .css file onto it, or press Open file. The badge shows Valid CSS, or the number of errors and warnings, as you type.
- If there are problems, read the line and column in the card under the input. Press Apply first fix for one, or Fix all to clear every fixable problem.
- Press Minify (Ctrl or Cmd + Enter) to replace the input with the small version, or Beautify (Ctrl or Cmd + Shift + Enter) to make it readable.
- Or leave the input alone and use the Output tab, where you can switch between Minify and Beautify and see how many bytes you saved.
- Copy the result or download it as styles.min.css. Use the Issues, Extract and Stats tabs for everything beyond minifying.
Common CSS mistakes and what the fix does
| Problem | Example | Fix |
|---|---|---|
| Missing opening brace | body font-family: serif; } | A { is added before the first property. |
| Missing semicolon | color: red background: blue | A ; is added between the two. |
| Missing colon | margin 0 auto | A : is added after the property name. |
| Misspelled property | colr: red | Changed to color. |
| Number without a unit | margin: 10 | px is added: margin: 10px. |
| Missing comma in font-family | system-ui sans-serif | A comma is added between the names. |
| Unclosed block | .card { color: red; | The closing } is added. |
| Extra closing brace | .card { color: red; } } | The extra } is removed. |
| Slash comment | // header styles | Turned into /* header styles */. |
| Repeated declaration | color: red; color: red; | The repeat is removed. |
CSS minifier FAQ
Is my CSS uploaded anywhere?
No. Checking, minifying, beautifying, fixing and the size stats all run in your browser, and the text is not sent to a server.
Will minifying change how my page looks?
It is built not to. Strings and url() values are copied exactly, the spaces inside calc() are kept, and rules are not merged, reordered or renamed. The only value changes are shorter spellings of the same value, such as #ffffff to #fff and 0.50em to .5em, and you can switch those off in Settings. If a file has errors, fix them first, because minifying broken CSS can hide the problem.
How much smaller will my CSS get?
It depends on how the file was written. Heavily commented and indented source often shrinks by a third or more, while CSS that is already compact saves little. The Output tab shows the exact percentage for your file, and the Stats tab adds the gzipped size, which is what most servers send over the network.
What does Fix all change, and is it safe?
It applies only repairs that have one obvious answer: adding a missing brace, semicolon, colon or comma, correcting a property name that is one typo away from a real one, adding px to a bare length, and removing a stray brace or a repeated declaration. It does not guess when a value is wrong. An invalid hex color, for example, is reported but left for you to change. Every fix can be undone with one click.
Why does a missing semicolon or brace matter if the page still loads?
Browsers do not stop on a CSS error, they skip the broken declaration or rule and carry on. A missing semicolon can make two declarations into one invalid line, and a missing brace can disable every rule after it. The page still loads, but part of your styling quietly stops working.
Why does it say a property is not a CSS property?
The name is not in the list of standard properties the tool knows about, so it is probably a typo. When a close match exists, the fix button changes it for you. Custom properties that start with -- and vendor prefixes such as -webkit- are never flagged.
Does it work with SCSS or Less?
It is built for plain CSS. You can open .scss and .less files, but nesting, variables and mixins are not compiled, and the checks may report problems on syntax that only those languages understand. Compile to CSS first, then minify.
How big a file can I open?
Files up to 25 MB, in .css, .scss, .less or .txt. Very large files are slower to highlight, but minifying and the other tabs still work.