CSS Minifier & Beautifier

What you can do here

• Minify CSS (compress a stylesheet): remove comments, whitespace and redundant semicolons
• Beautify CSS (format or pretty-print): one declaration per line with 2-space, 4-space or tab indentation
• Validate CSS structure: unmatched braces, unclosed strings and comments, with line numbers
• Convert CSS to LESS, SCSS, SASS or Stylus, and back, at the syntax level

Each operation has its own link: ?mode=minify, ?mode=beautify, ?mode=validate, or a conversion such as ?mode=css-to-scss.

What the minifier removes and keeps

Removed	Kept unchanged
Block comments (except /*! ... */ if you keep them)	Selectors, specificity and rule order
Newlines, tabs and indentation	Property names, values and !important
Spaces around { } ; , > and after :	Meaningful spaces in values: calc(100% - 32px), shorthands, grid-template-areas
The last ; before }	Everything inside quoted strings, such as content: "a  b"
With shortening on: #ffffff → #fff, 0px → 0, 0.5 → .5	0% (it matters in keyframes and flex-basis)

It does not merge selectors, rewrite shorthands or drop unused rules; build-time tools such as cssnano and Lightning CSS go further because they parse the full grammar.

Worked example

/* card component */
.card {
  margin: 0 auto;
  width: calc(100% - 32px);
  color: #ffffff;
}

minifies to

.card{margin:0 auto;width:calc(100% - 32px);color:#fff}

Run Beautify on that line and the indented block comes back. The spaces inside calc() are kept because calc(100%-32px) is invalid CSS.

When to minify and when to keep CSS readable

Write and edit CSS in its readable form, and minify only the copy that ships to browsers. A minified file turns every change into an unreadable one-line diff. Most projects minify in a build step (Vite, webpack, a Sass compiler); for a static page, a WordPress theme, an HTML email <style> block or a CMS field with a size limit, pasting CSS here before uploading is a quick substitute. Beautify is the reverse job: reading a vendor or legacy stylesheet that arrived minified.

Converting between CSS, LESS, SCSS, SASS and Stylus

The convert modes are syntax swaps, not compilers. They change variable syntax (--x, @x, $x) and var() references, and add or remove braces and semicolons for the indentation-based Stylus. They do not resolve @import, expand mixins, flatten nesting or evaluate math. For those, use a real compiler or the SCSS to CSS, LESS to CSS, SASS to CSS and Stylus to CSS converters.

Common questions