FixTools is a fast, browser-based CSS compressor that works on any CSS you can paste into it: hand-coded stylesheets, SCSS-compiled output, PostCSS-processed files, or CSS copied from a framework.
Loading Minify CSS…
Compresses CSS in a single click
Works on compiled CSS from SCSS, Less, or PostCSS
Browser-based, no server uploads
Free with unlimited usage
Drop the Minify CSS into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.
Embed code
<iframe
src="https://www.fixtools.io/css-tool/minify-css?embed=1"
width="100%"
height="780"
frameborder="0"
style="border:0;border-radius:16px;max-width:900px;"
title="Minify CSS by FixTools"
loading="lazy"
allow="clipboard-write"
></iframe>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
An online CSS compressor and a build-tool CSS minification plugin perform the same fundamental operation on the same input data, but they differ significantly in when and how they are invoked and how they fit into a development workflow. A build-tool plugin such as cssnano in a PostCSS pipeline, css-minimizer-webpack-plugin in Webpack, or the built-in minification in Vite runs automatically every time you execute your build command. It is the right choice for teams that deploy frequently and need every production deployment to be consistently optimised without a manual step. An online compressor is the right choice when there is no build pipeline, when you need to audit the compressed size of a third-party stylesheet you did not author, or when you need to compress a file in a context that falls outside the scope of your normal build process.
The compression algorithm used by FixTools follows the same standard principles as the most widely used build-tool minifiers. It tokenises the input CSS according to the W3C CSS Syntax Level 3 tokenisation algorithm, identifies whitespace tokens and comment tokens in the token stream, discards them, and serialises the remaining tokens without any separators between them. Optional trailing semicolons in the specific position immediately before a closing brace are also removed because they are explicitly listed as optional in the CSS grammar. The result of this process is deterministic: identical input always produces identical output with no variation between runs, no dependency on external configuration, and no randomness in the compression algorithm.
One advantage of using an online compressor over a build tool for performance auditing is immediate transparency into third-party CSS weight. You can paste a CSS framework, a UI library, or a third-party widget stylesheet into the compressor and see its compressed size instantly, without modifying your project, installing a dependency, or running a build. This is valuable for evaluating whether a library is worth its CSS weight before committing it to your project. A framework that compresses from 190KB to 155KB demonstrates an 18 percent reduction, while one that compresses from 190KB to 140KB demonstrates a 26 percent reduction. The difference tells you which framework was more heavily commented and formatted in its source and how much of its published size is overhead rather than actual CSS rules.
Comparing the FixTools compressor output to that of other minifier algorithms gives a useful confidence check on the result. cssnano in its default conservative preset, clean-css at optimisation level one, and esbuild's built-in CSS minifier all use the same whitespace-and-comment removal approach and typically produce outputs within one percent of each other on the same input file. More aggressive algorithms such as cssnano at the advanced preset, clean-css at level two, and lightningcss with all optimisations enabled go further by collapsing shorthand properties, merging adjacent rules, shortening hex colours from six to three characters, and reordering selector lists alphabetically. These transformations save an additional 5 to 12 percent but introduce a small but real risk of changing cascade behaviour. The conservative approach is the right default unless you have a complete visual regression suite.
Paste any CSS, hand-coded, framework output, or compiled from a preprocessor, and click Minify. The compressed output is production-ready.
Step-by-step guide to css compressor online:
Paste your CSS
Copy the CSS you want to compress from your text editor, terminal, or browser source viewer and paste it into the FixTools input panel. You can paste hand-coded CSS, compiled SCSS or Less output, PostCSS-processed CSS, or any other valid CSS text. There is no restriction on the source of the CSS or the amount you paste.
Compress
Click the Minify button to run the compression algorithm on your input. The tool tokenises your CSS, removes whitespace and comment tokens, drops optional trailing semicolons, and serialises the result. For most stylesheets the compressed output appears in under one second.
Copy the compressed output
Click the Copy to Clipboard button to copy the full compressed CSS. The output is a single continuous line of valid CSS with all whitespace and comments stripped. Verify the output length is shorter than the input length as a quick confirmation that compression ran successfully.
Save as .min.css
Paste the copied output into your text editor and save it as a new file with the .min.css suffix, for example styles.min.css. This naming convention clearly identifies the file as the compressed production version and prevents confusion with the uncompressed source file. Update your HTML link element to reference the new .min.css file before deploying.
Common situations where this approach makes a real difference:
A developer audits a third-party UI library by pasting its published stylesheet into FixTools to check the compressed byte count before committing to adding it as a dependency. The audit reveals the library compresses to 142KB, which exceeds the project's 50KB CSS budget per page and leads the developer to choose a smaller alternative that compresses to 38KB.
A technical writer pastes an SCSS-compiled stylesheet into FixTools to measure the final compressed output size for inclusion in a performance section of an engineering blog post, providing readers with an accurate before-and-after comparison based on actual tool output rather than estimates.
A front-end architect compresses Autoprefixer-generated output in FixTools to obtain the accurate post-prefixing compressed size for a performance budget spreadsheet shared with the engineering team, ensuring the budget figures reflect the actual bytes users receive rather than the pre-prefix stylesheet size.
Use this as a standalone CSS compressor when you need to reduce stylesheet size quickly without configuring a build pipeline.
Get better results with these expert suggestions:
Audit third-party CSS before committing to it
Before adding a CSS library or UI framework as a project dependency, paste its published stylesheet into the online compressor and record the compressed byte count. Compare that figure against your total CSS size budget for the page. If the library's compressed output alone exceeds your budget, evaluate whether a smaller alternative exists or whether a custom implementation that includes only the components you actually need would be more appropriate for your project's performance requirements.
Compare compressor output against cssnano for consistency
If your build pipeline uses cssnano, run the same stylesheet through the online compressor and compare the output lengths. The results should be nearly identical because both tools follow the same CSS tokenisation and whitespace-stripping approach. A large discrepancy in output size may indicate that your cssnano configuration in the build pipeline is either too aggressive, applying transformations beyond whitespace removal, or not aggressive enough, leaving some whitespace in the output that the standard algorithm would strip.
Compress vendor-prefixed output from Autoprefixer
After running your CSS through Autoprefixer to add -webkit-, -moz-, and -ms- vendor prefixes for browser compatibility, compress the prefixed output. Autoprefixer adds whitespace around the generated vendor-prefixed declarations in its output, and that whitespace can be removed by the compressor. The compressed size after autoprefixing is the correct size baseline to use for your performance budget, since the prefixed output is what your users actually receive.
Keep a compressed-size log for CDN cost estimation
If you serve CSS from a paid CDN with bandwidth billing, record the compressed byte size of your production stylesheets in a log file each quarter alongside the deployment date. A growing trend in compressed size across quarters indicates accumulating CSS weight that may justify a dedicated cleanup sprint. The log also provides the data needed to estimate the bandwidth cost of CSS growth when preparing infrastructure budget reports.
Compress compiled CSS, not source SCSS
Always compile SCSS or Less to CSS first, then run the compiled output through the compressor. Compressing preprocessor source files directly is not supported and not necessary.
Use the compressor to audit framework bloat
Paste a full Bootstrap or Foundation stylesheet through the compressor to see its compressed size. This helps you decide whether a custom CSS approach would be leaner for your project.
Name compressed files clearly
Save compressed output as filename.min.css to clearly distinguish it from the source file in your project directory and avoid accidentally editing the compressed version.
More use-case guides for the same tool:
Other tools you might find useful:
Open the full Minify CSS — free, no account needed, works on any device.
Open Minify CSS →Free · No account needed · Works on any device