Paste your CSS stylesheet below
Ready to minify
Paste your CSS and click Minify// compress css to one line in one click
Compress and optimize your CSS instantly — removes comments, whitespace, and redundant code to shrink file size and boost page load performance.
Ready to minify
Paste your CSS and click MinifyCopy your stylesheet code and paste it into the input panel on the left.
Hit the button (or press Ctrl+Enter) to compress your CSS instantly.
Copy the minified output to clipboard or download it as a .css file.
This CSS Minifier removes all unnecessary characters from your stylesheet — comments, whitespace, newlines, and redundant semicolons — without changing how the CSS behaves in a browser. The result is a smaller file that loads faster.
Yes. Minification only removes non-functional characters — comments, extra spaces, and newlines. The CSS rules themselves are preserved exactly, so your site looks identical after minification.
No. This minifier is designed to safely handle @keyframes, @media queries, @supports, and other at-rules without altering their logic or structure.
Typical savings range from 20% to 50% depending on how much whitespace and comments your CSS contains. Files heavy with documentation comments can see even greater reductions.
The minification is processed server-side via a lightweight PHP function, but your code is never stored, logged, or shared. It is processed and immediately discarded.
Minification removes unnecessary characters at the text level. Compression (like gzip or Brotli) is a binary encoding applied by your web server. They work together — minify first, then enable gzip on your server for best results.
Always. Keep your readable source CSS in your project files and use the minified version only for deployment. Many developers automate this with build tools like Vite, Webpack, or Gulp.
This tool works on plain CSS only. For SCSS or Less, you should first compile them to CSS using their respective compilers, then paste the compiled output here to minify it.
Minified CSS is intended for machines, not humans. All formatting is stripped to minimize file size. To edit it, use the CSS Beautifier to restore readable formatting, make your changes, then minify again.
A CSS minifier is a tool that reduces the file size of a CSS stylesheet by removing all characters that are not required for the browser to interpret and render the styles correctly. This includes whitespace characters (spaces, tabs, newlines), CSS comments, and redundant semicolons before closing braces. The end result is a single-line CSS file that is functionally identical to the original but significantly smaller in byte size.
CSS minification is one of the most established and universally recommended performance optimizations in web development. Major websites — from Google to Amazon — serve minified CSS in production because even small reductions in asset size translate to faster page loads, particularly on mobile networks or for users in bandwidth-constrained regions.
When a user visits your website, their browser must download every resource referenced in the HTML, including CSS stylesheets. CSS is render-blocking by default — the browser will not display any content until it has downloaded and parsed all linked CSS files. This means larger CSS files directly delay the time to first meaningful paint.
Google's Core Web Vitals, which influence search rankings, include metrics like Largest Contentful Paint (LCP) and First Contentful Paint (FCP) — both of which are negatively impacted by large, unoptimized stylesheets. Minifying your CSS is one of the simplest actions you can take to improve these scores without changing your design or code structure.
A CSS minifier targets several categories of non-essential content:
/* ... */) — documentation and developer notes that the browser ignores entirelyImportantly, a well-implemented minifier does not remove spaces that are semantically meaningful. For example, spaces inside calc() expressions, between selector parts like .parent .child, or inside string values are preserved correctly.
Minification and compression are often confused, but they operate at different levels and complement each other rather than being alternatives.
Minification works at the text level — it rewrites your CSS to remove unnecessary characters. This makes the file smaller on disk and reduces the amount of data transferred. Minification is permanent; the output is a readable (though dense) text file.
Compression (such as gzip or Brotli, enabled on your web server) works at the binary level — it encodes the file using lossless algorithms that dramatically reduce transfer size over the network. The browser automatically decompresses the file before using it. Compression is transparent to the developer.
For best results, you should do both: minify your CSS files as part of your build process, then enable gzip or Brotli on your server. Minified CSS compresses even better than unminified CSS because it has less variation in its characters.
Using this tool is straightforward. Paste your CSS into the input panel on the left side of the page. You can paste a single rule, a component stylesheet, or an entire production CSS file. Click the Minify CSS button (or press Ctrl+Enter) to process the input.
The tool displays the minified output in the right panel along with key statistics: the original byte size, the compressed byte size, the number of bytes saved, and the compression ratio as a percentage. You can copy the minified CSS to your clipboard with one click, or download it as a .css file ready to deploy.
For small projects or one-off tasks, pasting CSS into a browser-based minifier is perfectly efficient. For larger projects or teams, you will likely want to automate minification as part of a build pipeline:
css-minimizer-webpack-plugin (based on cssnano) for CSS minificationgulp-clean-css plugin handles minification in Gulp pipelinesEven if you use a build tool, this online minifier is useful for quickly checking output, minifying standalone files, or testing how much a particular stylesheet can be reduced before committing to build tool setup.
One consideration when deploying minified CSS in production is debuggability. A minified stylesheet is a single line, which makes it difficult to trace issues using browser DevTools. Source maps solve this problem — they are separate files that map lines in the minified output back to their original positions in the source file, allowing DevTools to display the readable source during debugging even though the browser is loading the minified version.
Build tools like Vite and Webpack generate source maps automatically when configured to do so. For this online tool, the output is the minified CSS directly; source map generation is beyond the scope of a browser-based utility but is recommended when using automated build tools in production.
While CSS minification is generally safe, there are a few edge cases to be aware of:
content: " "; values must be preserved; well-implemented minifiers handle this correctlycalc() are required by the CSS specification and must not be removedThis tool handles these cases correctly. Always test your minified CSS in a staging environment before deploying to production if your stylesheet uses advanced or non-standard patterns.