What does the CSS beautifier do?

The beautifier re-formats your CSS with consistent indentation, line breaks after each declaration, and a blank line between rule blocks. It is powered by js-beautify, the same library used in many code editors.

What does the CSS minifier do?

The minifier strips all block comments, collapses whitespace, and removes unnecessary spaces around braces, colons, and semicolons - reducing the byte size of the file for production delivery.

Does my CSS leave my browser?

No. All processing runs entirely in your browser using JavaScript. Your CSS is never uploaded to any server.

Can I minify CSS with custom properties (variables)?

Yes. CSS custom properties (e.g., --color-primary: blue) are preserved correctly in both beautify and minify modes.

CSS Beautifier & Minifier

What is CSS beautifying?

CSS produced by preprocessors, minifiers, or copy-pasted from a browser DevTools panel is often dense and hard to read. Beautifying adds consistent indentation, line breaks after each declaration, and blank lines between rule blocks, making the code immediately understandable and reviewer-friendly.

What is CSS minification?

Minification strips all comments, collapses whitespace, and removes unnecessary characters around braces and semicolons. The result is functionally identical but smaller, reducing network transfer size and improving page load performance. Minified CSS is not meant to be hand-edited.

When to use each mode

Use Beautify during development and code review. Use Minify for production deployments or when embedding CSS in a bundle. Your build tool (Vite, webpack, esbuild) typically handles minification automatically. Use this tool when you need a quick one-off transformation.

CSS property order

Several popular conventions exist for ordering CSS properties within a rule. Consistent ordering improves readability and makes diffs easier to parse:

Alphabetical: Sort all properties A–Z. Simple and deterministic, but conceptually unrelated properties can end up adjacent.
Concentric CSS: Box model properties from outside-in: display, positioning, box model (margin -> border -> padding -> width/height), then typography, visual styles, transforms/animations.
SMACSS order: Categorize by function: layout (position, display, float) -> box model -> typography -> visual -> misc. Popular in larger codebases.

Ordering only matters when you manually write and review CSS. Minified CSS ignores order entirely.

Vendor prefixes

This formatter does not add or remove vendor prefixes (-webkit-, -moz-, -ms-). Modern build pipelines use autoprefixer (a PostCSS plugin) to automatically inject prefixes based on your target browsers. Manual prefix management is no longer recommended.

Privacy

All processing runs entirely in your browser. Your CSS is never uploaded to any server.