Related Tools
JavaScript MinifierConcatenate, uglify & compress
CSS AutoprefixerVendor prefixes + Browserslist
CSS → TailwindConvert CSS to utilities
Tailwind → CSSExpand utilities to CSS
HTML FormatterPrettify HTML, CSS & JS
Tailwind FormatterSort & group classes
HTML → JSX ConverterConvert HTML to React
Diff CheckerCompare text & codeCSS Minifier & Beautifier Online — Minify and Format CSS Free
What's included
Features
About this tool
Minify CSS for Production or Beautify Minified CSS for Readability — No Build Tools Required
You need to reduce your CSS file size before deploying, but you don't have a build pipeline set up. Or you copied a minified stylesheet from browser DevTools or a CDN and you can't read a word of it. Paste it here, click Minify or Beautify, and the result is ready in under a second — with an exact byte count showing how much was saved or expanded.
The minifier runs a short chain of regex passes: strip /* … */ comments, collapse all runs of whitespace to a single space, then remove the space around {, }, ;, ,, and :, and finally drop the semicolon immediately before a closing brace since it's redundant. The browser parses the result identically to developer-formatted CSS — the only difference is byte count. For a typical stylesheet with generous whitespace and inline comments explaining each section, minification reduces file size by 25–50%.
The beautifier is not a reverse regex — restoring indentation reliably needs actual structure, so it walks the input character by character with a state machine tracking brace depth and whether it currently expects a property name or a value. Depth tells it when a colon should be treated as a property/value separator (and rendered without a following newline) versus a pseudo-class colon or part of a selector; a dedicated branch matches :: so pseudo-elements like ::before aren't mistaken for a declaration. String literals are scanned separately so a semicolon or brace inside a quoted content: ';' value doesn't trigger a fake line break, and comments are re-indented to the current depth rather than left wherever they happened to sit in the minified source. The result: 2-space indentation, one property per line, and a blank line between rule blocks, matching the formatting Prettier applies to CSS.
A stats bar shows input size, output size, bytes saved, and percentage change after every operation, so you know whether the optimization was worthwhile before shipping. An Edit button feeds the current output back into the input panel so you can chain operations — beautify to read and adjust a file, then minify the revised version without retyping anything. History keeps up to 15 timestamped snapshots per session, each showing the operation type and byte counts; click any entry to restore both the original input and processed output instantly. Everything runs in your browser with no server request, no sign-up, and no file size limit.
Step by step
How to Use
- 1Paste or upload your CSSPaste your CSS directly into the editor on the left — anything from a single rule block to a complete multi-section stylesheet. Or click Upload to load a
.cssfile from your computer, or drag and drop a.cssor.txtfile directly onto the editor area. The editor accepts both formatted and already-minified CSS. - 2Click Minify or BeautifyClick Minify to compress the CSS for production: strips all comments, whitespace, blank lines between rules, and trailing semicolons before closing braces. The browser parses minified CSS identically — the only change is file size. Click Beautify to format minified or poorly-indented CSS for readability: adds 2-space indentation, puts each property on its own line, places the opening brace on the selector line, and adds blank lines between rule blocks.
- 3Check the stats barAfter every Minify or Beautify operation, the stats bar at the top shows the full comparison: input size, output size, bytes saved (or added for beautification), and the percentage change. For well-commented, generously spaced CSS, minification typically achieves 25–50% reduction. The stats update instantly so you know whether the optimization is worthwhile before committing.
- 4Edit, refine, and reprocessClick Edit to move the current output back into the input area — useful for making manual adjustments and then running Minify or Beautify again. The Edit button lets you chain operations: beautify a file to read it, make edits, then minify the revised version. Click Clear to reset both panels and start over.
- 5Copy or download the outputClick Copy to copy the full processed CSS to your clipboard with a confirmation toast. Click Download to save the output as a file —
.min.cssfor minified output,.cssfor beautified. When a file was uploaded, the download filename is derived from the original filename; pasted content defaults tostyle.cssorstyle.min.css. - 6Restore previous sessions from HistoryClick History to open the history panel. Every Minify and Beautify operation is automatically saved as a timestamped snapshot (up to 15 entries). Each entry shows the operation type, input size, and output size. Click any entry to restore both the original input and the processed output — useful for comparing multiple versions, recovering from accidental edits, or switching between files worked on in the same session.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Paste your CSS into the editor and click Minify. The minifier removes whitespace, comments, blank lines between rules, and trailing semicolons — everything the browser doesn't need. The stats bar immediately shows the input size, output size, bytes saved, and percentage reduction. Click Download to save the result as a .min.css file. No webpack, Vite, Node.js, or npm installation required.
For typical developer-formatted stylesheets with generous whitespace and inline comments, minification reduces file size by 25–50%. The exact amount depends on how much whitespace and how many comments are in the original. The stats bar shows the precise byte count and percentage after every minification — so you know immediately whether the optimization was worthwhile for that specific file.
No. CSS minification only removes whitespace, comments, and trailing semicolons — none of which affect how the browser parses or applies style rules. The rendered page looks identical before and after minification. If you see a rendering difference, it means a pre-existing CSS syntax error was present in the original that minification exposed, not a problem introduced by the minifier.
Paste the minified CSS into the editor and click Beautify. The beautifier adds 2-space indentation inside rule blocks, puts each property on its own line with a semicolon, places opening braces on the same line as the selector, and adds blank lines between rule blocks. The result matches the formatting conventions used by Prettier and modern CSS style guides. Works on any minified CSS — from third-party libraries, CDN-served stylesheets, browser DevTools, or your own production builds.
Yes. Click Upload to open a file picker, or drag and drop a .css file directly onto the editor area. The file loads instantly into the editor. After minifying or beautifying, click Download to save the result — as .min.css for minified output or .css for beautified — with the filename derived from the original uploaded file.
Every time you click Minify or Beautify, a timestamped snapshot is automatically saved to the history panel (up to 15 entries). Each entry shows the operation type, input size, and output size. Click any entry to instantly restore both the original input and the processed output together. This lets you compare multiple versions of a stylesheet, recover from accidental edits, or switch between several files you were working on in the same session.
No. All processing runs entirely in your browser using JavaScript. Your CSS is never transmitted over the network, never stored on any server, and never logged anywhere. Safe for proprietary stylesheets, client work, and any CSS you wouldn't want shared with a third-party service. The tool also works fully offline once the page has loaded.
They are complementary. Minification removes unnecessary characters from the CSS source before it is served. Gzip or Brotli compression is applied by the web server when transmitting the file to the browser — it finds repeating byte patterns and encodes them more efficiently. Both work best together: minify first, then let your server apply gzip. Minification typically reduces file size by 25–50%; gzip on top of that adds another 60–80% reduction.