What is CSS Minifier?
A CSS minifier is a developer tool that shrinks the size of a stylesheet without changing how it styles your page. It strips out the characters the browser ignores - comments, indentation, line breaks, and repeated spaces - and tightens the spacing around braces, colons, semicolons, and child combinators, so the file downloads in fewer bytes and blocks rendering for less time. A safe minifier is careful about what it removes: this one protects the contents of quoted strings and url() values, keeps the spaces calc() needs around + and -, and preserves the space before the parenthesis in media queries, so nothing in your styles breaks. Everything runs in your browser, which makes it safe for private design systems and unreleased themes.
Free online CSS minifier. Compress and minify CSS by removing comments and collapsing whitespace - smaller stylesheets, faster page loads. Runs in your browser, no upload required.
Try it now
Open the free CSS Minifier and follow the steps below - no download required.
Why use CSS Minifier?
- Reduce CSS file size to speed up page loads and improve Core Web Vitals
- Cut render-blocking bytes on high-traffic and mobile pages
- See exact bytes saved and the percentage reduction for every stylesheet
- Keep styles intact - strings, url() paths, calc(), and media queries are preserved
- Runs 100% in your browser, so private CSS never leaves your device
How to use CSS Minifier - step by step
- Step 1: Paste or type your CSS into the input box.
- Step 2: Click Minify CSS to remove comments and collapse extra whitespace.
- Step 3: Review the bytes saved and the percentage reduction shown above the output.
- Step 4: Click Copy to grab the minified CSS for your project or build pipeline.
The CSS Minifier lives under Developer Tools. Open the tool page, enter your input in the main field, and results update instantly. Use the copy button to paste output into documents, code editors, or spreadsheets.
Common use cases
Optimizing stylesheets before deploy
Minify hand-written CSS, component styles, and theme files as a final step before publishing to ship the smallest possible stylesheet.
Speeding up page load and Core Web Vitals
CSS is render-blocking, so a smaller stylesheet lets the browser build the page sooner - which helps First Contentful Paint on slow mobile connections.
Cleaning exported or generated CSS
CSS exported from design tools, preprocessors, or page builders is often bloated with comments and indentation - minify it to trim the fat.
Comparing before/after byte size
Use the bytes-saved readout to measure how much a stylesheet benefits from minification before wiring it into your build pipeline.
Examples
- Collapse whitespace and tighten rules: A formatted rule like .box {\n margin: 0 auto;\n color: #333;\n} becomes .box{margin:0 auto;color:#333} - smaller and identical when applied.
- Remove comments: Developer comments such as /* main layout */ are stripped from the output, while text inside strings and url() values is preserved.
- Preserve calc() and media queries: Spacing that CSS requires - like calc(100% - 20px) and @media screen and (min-width: 900px) - is kept intact so your styles never break.
Pro tips
- Keep a readable, formatted copy in source control and minify only the output - never edit minified CSS by hand.
- Stack minification with gzip or Brotli on your server; minifying shrinks the uncompressed size and the compressor handles the rest.
- Author styles in a preprocessor or plain CSS, then run this as a final build step so your source stays easy to maintain.
- For the biggest wins, also remove unused rules with a tool like PurgeCSS before minifying - fewer rules beat tighter whitespace.
- Inline critical CSS in the <head> and minify it too; every byte in a render-blocking block counts toward faster paint.
Frequently asked questions
What does a CSS minifier do?
A CSS minifier reduces the size of a stylesheet without changing how it styles your page. It removes the characters browsers ignore - comments, line breaks, indentation, and repeated spaces - and tightens the spacing around braces, colons, semicolons, and combinators. The rendered page looks identical, but the file is lighter and downloads faster.
Does minifying CSS change how my site looks?
No. Minification only removes characters that do not affect the result - whitespace and comments - and safely tightens punctuation. Declarations, selectors, and values are untouched. This tool also preserves the spacing CSS genuinely needs, such as inside calc() and between the parts of a media query, so nothing breaks.
Is my CSS uploaded to a server?
No. All minification happens entirely in your browser using JavaScript. Your CSS is never sent to or stored on a server, which makes the tool safe for private stylesheets, design systems, and unreleased themes.
Why should I minify CSS?
Smaller CSS files transfer faster and block rendering for less time, which improves page load speed and Core Web Vitals - especially on mobile and high-traffic pages. Minified CSS also lowers bandwidth costs. Keep a readable, formatted version in your source code and minify as part of your build or before deploying.
How much smaller will my CSS be?
It depends on how much whitespace and how many comments your stylesheet contains. Heavily formatted, well-commented CSS often shrinks by 20-40%, while already-compact CSS saves less. The tool shows the exact bytes saved and the percentage reduction so you can see the result for your specific file.
Will it break calc(), custom properties, or url() paths?
No. This is a safe minifier: it protects the contents of quoted strings and url() values, keeps the spaces that calc() requires around + and -, and preserves the space before the parenthesis in media queries. It focuses on the reductions that are always safe rather than aggressive rewrites that can break edge cases.
Should I minify CSS or just use gzip/Brotli?
Use both. Server compression (gzip or Brotli) already handles repeated whitespace well, so the over-the-wire difference from minifying alone is smaller than the raw byte saving. Minifying still helps: it shrinks the uncompressed size in caches and memory, gives the compressor less to do, and guarantees a smaller file even where compression is unavailable.
Related tools you might need
Explore other developer tools on ToolsMinify. Related utilities are linked on the CSS Minifier page to help you complete your workflow without leaving the site.
Ready to start?
Use the CSS Minifier for free - accurate, fast, and optimized for mobile.