CSS Minifier
Minify and compress CSS online with csso: merge rules, shorten values, strip comments and see the bytes saved. Also formats and validates CSS.
How to use CSS Minifier
- 1Paste plain CSS or open a .css file; Minify is the selected mode.
- 2Choose whether to restructure rules, keep the first @charset and what to do with comments.
- 3Copy or download the minified CSS and read the bytes saved; switch Mode for Format or Validate.
What makes it better
- csso minification with value shortening and rule merging
- Restructuring on or off, so rule order can be preserved
- Keep the first @charset, and remove, keep or half-keep /*! */ comments
- Bytes before and after and percent saved
- Format and Validate modes on the same page, with SCSS and Less for those
About CSS Minifier
The CSS Minifier uses csso to strip whitespace and comments, shorten values such as 0px and #ff0000, and merge duplicate declarations into shared rules, then shows bytes before and after and the percentage saved. Restructuring can be switched off if you need the rules kept in order. The Mode switch also formats or validates CSS, and the language switch offers SCSS and Less for those modes.
Common uses
- Shrink a stylesheet by hand for a static site or an email template without a build step.
- Compare file sizes with and without restructuring to see whether it is worth the risk.
- Prepare a small CSS block for a limited-length field or an inline style tag.
- Check how much of a framework override file is comments and spacing.
Example
Input
/* Layout helpers */
:root {
--brand: #be123c;
}
body {
margin: 0px;
font-family: "Inter", sans-serif;
}
.card {
display: flex;
padding: 16px 24px;
color: #ff0000;
}
.card:hover {
border-color: var(--brand);
}
.btn {
color: #ff0000;
padding: 16px 24px;
}
Result
:root{--brand:#be123c}body{margin:0;font-family:"Inter",sans-serif}.card{display:flex}.card:hover{border-color:var(--brand)}.btn,.card{color:red;padding:16px 24px}Good to know
- Minify works on plain CSS only. SCSS and Less must be compiled first; the tool tells you when the input looks like a preprocessor file instead of guessing.
- Restructuring merges and reorders rules where it is safe by the CSS cascade, but unusual hacks for old browsers can be affected, so turn it off if a layout changes.
- Output is compact on purpose and meant for delivery, not editing; keep the readable source.
CSS Minifier FAQ
How do I minify CSS online?
Paste the stylesheet into the input box and the compact version appears next to it with the bytes saved. Copy it or download it as a .min.css file. All the work happens in your browser.
What does restructuring do in CSS minification?
It merges rules that share declarations, removes ones that are overridden and combines selectors, which gives smaller output than whitespace removal alone. Switch it off if you want every rule to stay where you wrote it.
Why does the minifier reject my SCSS or Less file?
csso understands plain CSS only, and variables, nesting and mixins are not valid CSS. Compile the file to CSS with Sass or the Less compiler first, or use Format mode here to tidy the source instead.
What happens to my comments and @charset?
By default all comments are removed. You can keep /*! */ licence comments, or only the first one, and the first @charset rule is kept at the top because browsers use it to read the file's encoding.
Is a minified stylesheet safe to deploy?
For standard CSS yes, since minification keeps the meaning. Compare the page visually once, and keep your readable file as the source, because the minified text is hard to edit.