What this tool does
Paste a stylesheet on the left. Format puts each declaration on its own line with a two-space indent. Minify removes comments and unnecessary whitespace and drops the last semicolon in each rule. The right panel shows a live preview of your CSS applied to a small sample page, or the formatted code, and shows a rule count and file size.
How to use it
- Paste your CSS into the editor.
- Press Beautify CSS or Minify CSS.
- Check the result in the preview or the formatted source, then Copy CSS or Download .css.
How it works, and where it stops
The formatter is a short chain of text replacements, not a CSS parser. It collapses whitespace, breaks lines after { and ;, and puts closing braces on their own line. For normal stylesheets that is enough. Be careful with:
- Strings and URLs that contain
;or{, for examplecontent: "a;b"or a data URI. The formatter can break them across lines. Check these by eye. - Nested CSS and at-rules. Rules inside
@mediaor nested selectors are not indented one level deeper. - Anything it doesn’t understand. It doesn’t sort properties, merge rules, remove unused CSS, add vendor prefixes or convert units. It also does not rewrite
0pxto0.
The minifier strips /* */ comments, collapses spaces, and removes spaces around { } : ; ,. That is safe for ordinary CSS, but it is not a replacement for a production minifier such as the one in your build tool or caching plugin.
The preview
Your CSS is injected into a sandboxed frame that contains a few buttons, a card and some text. It shows whether your selectors hit those elements. It is not a preview of your own site, so it won’t show how the CSS interacts with your real markup.
Typical uses
- Reading a minified stylesheet you downloaded to see how a plugin styles something
- Tidying a snippet before pasting it into the WordPress Customizer
- Checking roughly how much a block of CSS shrinks when minified
SCSS, Sass and Less are not compiled. Paste the compiled CSS instead.
Does it sort properties or remove unused CSS?
No. It only changes whitespace and line breaks, and the minifier also removes comments.
Can it break my CSS?
Rarely, but strings or data URIs that contain semicolons or braces can be split by the formatter. Review those lines after formatting.
Does it handle SCSS or Less?
No. It works on plain CSS. Compile preprocessor code first.
Is my stylesheet uploaded?
No. Everything runs in your browser.
Can I download the result?
Yes. Use Copy CSS to copy it, or Download .css to save a file.