ValidateHTML
Your sites

CSS Formatter & Minifier

Beautify messy CSS, or minify it for production. The minified stylesheet renders exactly like the original, which is checked on real frameworks.

Ctrl+Enter also works. Your CSS is processed in your browser and never sent to a server.

Smaller, and Rendering the Same

StylesheetOriginalWhitespace onlyOptimised
Bootstrap 5.3.3274 KB233 KB227 KB
Pico 2.0.690 KB81 KB79 KB
Bulma 1.0.2745 KB678 KB668 KB

Sizes before gzip. For each one, a real page was rendered in Chromium at 1280 px and 390 px, once with the original file and once with each output, and every computed style of every element, including ::before and ::after, had to match. Gzip or Brotli on your server will shrink all three columns much further; minifying still removes what compression cannot, like comments and overridden declarations.

Four Ways a Minifier Can Break a Site

Each of these came out of Lightning CSS, one of the best minifiers available, on its default settings while this tool was being built. None of them throws an error: the page simply looks different on some devices.

Media queries rewritten for new browsers only

@media (min-width: 768px) can be shortened to @media (width >= 768px). That range syntax only works from Safari 16.4, so on older iPhones and iPads the query silently stops applying and the layout falls back to mobile. This minifier keeps min-width.

Right-to-left layouts flipped

margin-inline-start means the left side in English and the right side in Arabic or Hebrew. Lowering it to margin-left for older browsers breaks every right-to-left page. Logical properties are left exactly as written.

Grid widths rounded

Lightning CSS keeps about six significant digits, so Bootstrap's 33.33333333% becomes 33.3333%: one column measured 423.984 px instead of 424 px, and 8.3333% + 91.6667% adds up to more than 100%. This minifier puts the original numbers back.

Licence comments dropped

Most libraries ship a /*! ... */ header that their licence asks you to keep. Comments starting with /*! survive every minify here, exactly once.

Beautify Without Changing Meaning

In CSS some whitespace is meaning. .nav a selects links inside .nav, and .nava selects nothing you wanted. calc(100% - 2rem)needs its spaces to be valid. So the formatter only adds or removes whitespace where the grammar ignores it: around braces and semicolons, before a declaration's colon, and between rules. Everywhere else a run of spaces becomes one space, which is how browsers read it anyway.

Delete every space and line break from your input and from the formatted output, and you get the same text. Comments stay where they were, and a declaration without its final semicolon keeps it missing. If you want to know whether the CSS itself is right, the CSS Validator checks every property and value, and the CSS error guides explain the fixes.

Frequently Asked Questions

Does minifying change how my page looks?
It should not, and it is checked: Bootstrap, Pico and Bulma are rendered in Chromium at 1280 px and 390 px with the original stylesheet and with the minified one, and every computed style of every element must match. The cases that failed while building it (rounded grid widths, rewritten media queries, flipped right-to-left properties) are fixed and are part of that check.
What is the difference between Optimise and whitespace-only minify?
Whitespace-only minify removes spaces, line breaks and comments and rewrites nothing; it runs in your browser. Optimise also merges rules, shortens colours and numbers (#ff0000 becomes red, 0px becomes 0) and removes declarations that a later one overrides, using Lightning CSS on our server. On Bootstrap that is 227 KB against 233 KB.
Which browsers is the optimised CSS written for?
It is written to keep working in Safari and iOS 14, Chrome and Edge 87, Firefox 78, Samsung Internet 13 and later. A fallback a newer browser does not need can be removed, and a prefix one of those browsers needs can be added. Nested CSS, logical properties and light-dark() are left as you wrote them.
Does beautify change my CSS?
Only whitespace. Each declaration goes on its own line, nested blocks are indented, and runs of spaces become one. Spaces that carry meaning, like the one in a descendant selector (a b) or in calc(100% - 2rem), are never removed, and a missing last semicolon is not added. Strings, url() values and comments are copied as written.
Is my CSS sent to a server?
Beautify and whitespace-only minify run entirely in your browser. Optimise sends the stylesheet to our server, where Lightning CSS minifies it and returns the result; it is not stored or logged.
Does the optimised CSS change custom properties?
It can rewrite the value inside a custom property in a shorter notation, for example --brand: rgb(37 99 235) becomes --brand: #2563eb. What renders is the same, which the rendering check confirms. A script that reads the variable with getPropertyValue would see the new text.
Why does it say part of my stylesheet was left out?
Lightning CSS reports anything it cannot read, such as old Internet Explorer hacks like *zoom: 1. Those declarations are dropped from the optimised result, which is what current browsers do with them anyway, and each one is listed with its line and column so nothing disappears silently. The CSS Validator explains the errors in detail.
Does it support nesting, @layer and @container?
Yes. Native CSS nesting, cascade layers, container queries, @supports, @font-face and @keyframes are formatted and minified, and nesting is kept nested rather than flattened.

Related Tools

CSS ValidatorHTML FormatterJSON FormatterXML Formatter