How to use the css and html minifier and formatter
- Paste CSS or HTML into the Code box, or choose a .css or .html file. A file ending in .html switches the task to HTML for you.
- Choose the task: Minify CSS, Format CSS, or Minify HTML. For formatting, pick the indent. For HTML, tick or clear the options for comments, white space in text, and CSS inside style tags.
- The result appears as you type, with a count of how many characters were saved. If the text has an unclosed comment, string or bracket, the message gives the line and column and a button jumps the cursor there.
- Press Copy result or Download to keep the minified or formatted code under a clear file name.
A small stylesheet
The 74 characters "a {", a line with "color : red ;", a line with "margin: 0 auto;", "}", a comment, and "b , c > d { top: 0 }" across several lines become the 41 characters a{color :red;margin:0 auto}b,c > d{top:0}. That is 44.6% smaller. The comment is gone, the last semicolon before each closing brace is dropped, and the spaces after colons, around commas and around braces are removed.
The space in "color :red" is kept on purpose. In a selector a space before a colon changes its meaning, as in "a :hover" compared with "a:hover", and the tool cannot always tell a property from a selector, so it never removes that space. The space between "0" and "auto" and the spaces around the greater-than sign are kept as well.
What the minifier does and does not do
For CSS it removes ordinary comments, collapses runs of white space, removes white space next to braces, semicolons, commas and after colons, and drops a semicolon directly before a closing brace. Comments that start with /*! are kept because they usually hold license text. Strings, url() contents, numbers, colors, selectors and values are copied exactly. Nothing is renamed, reordered, merged or shortened, so there are no surprises about specificity or cascade order.
For HTML it removes comments (conditional comments for old browsers are kept), collapses runs of white space in text to one space, removes the white space that the browser ignores around the head and html elements, and puts tags in a tidy form with single spaces between attributes. Attribute values keep their quotes and exact text. The content of script, pre and textarea elements is never touched. This tool does not minify JavaScript, because doing that safely needs a full parser.
How the result is checked
After every run, CSS output is read again and compared piece by piece with your input. Only comments, white space and one semicolon before a closing brace may differ. For HTML, both the original and the result are parsed by your browser's own HTML parser, in a document that never runs scripts or loads pictures, and the two trees are compared. If they differ, the tool shows a message instead of a changed page.
These checks were tested on a set of real-looking snippets and on thousands of random inputs, using the PostCSS reader as an independent check for CSS and a second HTML parser for pages. The formatter for CSS puts each rule and declaration on its own line and keeps commas inside values on the same line.
When to leave an option off
If your page uses CSS such as white-space: pre-wrap on an element other than pre or textarea, collapsing white space would remove spaces that matter, so turn that option off. Inline style attributes and scripts are left as they are. For other formats, see the SQL formatter, the JSON formatter and validator and the Markdown editor.
Assumptions and limits
- CSS is read as written, including nested rules. Invalid CSS is not repaired, and a space that only matters in invalid CSS may be removed.
- A comment placed between two tokens with no space around it is replaced by a single space so the tokens stay separate.
- Whitespace-only text inside the head element, directly after the doctype and around the html, head and body tags is removed because browsers ignore it. Elsewhere, runs of white space become one space and are never removed entirely.
- Input is limited to 2,000,000 characters. Files over 5 MB are refused.
Frequently asked questions
Does minifying change how my page looks?
It is built not to. Only comments and white space change, and each result is checked against the original before it is shown. Test your page after publishing, as you would after any build step, especially if you rely on unusual white space settings in CSS.
Why is JavaScript not supported?
Removing comments and spaces from JavaScript safely requires telling regular expressions from division and handling automatic semicolons, which needs a full parser. A tool that guesses can break working code, so this one leaves script content untouched.
Why was a semicolon removed from my CSS?
The last declaration in a block does not need one, so the semicolon right before a closing brace is dropped. Semicolons after at-rules such as import and charset are kept.
Is my code uploaded anywhere?
No. Everything runs in your browser tab. The HTML check uses a parsed copy that cannot run scripts or load files, so pasting a page with scripts or pictures in it does not execute or fetch anything.