Skip to main content

    CSS Minifier

    Minify CSS online. Remove comments, whitespace, and redundant characters to reduce file size.

    Free to use. Runs in your browser.

    Paste CSS and click Minify to strip whitespace, comments, and unnecessary semicolons. Reduces file size by 20 to 60% for faster page loads.

    Input CSS

    Minified Output

    Why Minify CSS?

    CSS files are render-blocking, the browser won't paint anything until it's downloaded and parsed your stylesheets. Every kilobyte of CSS directly delays your First Contentful Paint (FCP). Minification removes the parts humans need (comments, indentation, whitespace) while keeping everything the browser needs.

    A typical stylesheet shrinks 20-40% after minification. Combined with Gzip/Brotli compression, a 100 KB CSS file can drop to under 15 KB over the wire. Faster initial render, better Core Web Vitals, improved search rankings.

    What Minification Removes

    ElementBeforeAfterSafe?
    Comments/* Header styles */(removed)Always safe
    Indentation margin: 0;margin:0Always safe
    Selector spacing.btn > span { }.btn>span{}Always safe
    Last semicolonscolor: red; }color:red}Always safe
    Line breaksMultiple lines per ruleOne continuous lineAlways safe

    The minified CSS renders identically. Browsers don't need whitespace or comments. Always keep your source files readable and only minify for production output.

    Real Size Savings

    Here's what minification looks like on real-world stylesheets:

    StylesheetOriginalMinifiedSavings
    Small site (50 rules)8 KB5 KB37%
    Medium site (200 rules)35 KB24 KB31%
    Bootstrap 5230 KB190 KB17%
    Tailwind (purged)50 KB38 KB24%

    After Gzip, the minified files compress even further, typically 70-85% smaller. Minification + compression is the standard production pipeline.

    Build Tool Comparison

    For production projects, build tools do more than basic minification. Here's how they compare:

    This tool (online)

    Quick one-off minification. No setup needed. Paste CSS, get minified output. Ideal for snippets, debugging, or when you're not near your build environment.

    cssnano / PostCSS

    Production standard. Advanced optimisations: shorthand merging, colour reduction, calc() simplification. Integrates with Webpack, Vite, Rollup.

    Lightning CSS

    Rust-based, extremely fast. Handles minification, vendor prefixing, and CSS nesting in one pass. The modern choice for new projects.

    PurgeCSS / Tailwind JIT

    Removes unused CSS entirely, not just whitespace but whole rules. The biggest wins come from tree-shaking, not minification.

    Related Tools

    CSS Beautifier

    Re-format minified CSS for reading

    HTML Minifier

    Minify HTML for production

    JS Minifier

    Minify JavaScript code

    CSS Gradient Generator

    Generate gradient CSS

    CSS Box Shadow Generator

    Generate shadow CSS

    Colour Converter

    Convert CSS colour formats

    How to use this tool

    1

    Paste your CSS into the input area

    2

    Click Minify CSS to compress

    3

    Copy the result or download as styles.min.css

    Common uses

    • Reducing CSS file size for production deployment
    • Stripping comments before going live
    • Preparing inline CSS for HTML email templates
    • Quick minification for small CSS snippets

    Share this tool

    Frequently Asked Questions

    What does CSS minification do?
    It removes comments, whitespace, line breaks, and unnecessary characters from your CSS. The result is functionally identical code that's 20-40% smaller, loading faster for your users.
    Will minification break my styles?
    No. Minification only removes whitespace and comments. Selectors, properties, and values stay exactly the same. The browser renders minified CSS identically to the original.
    Is my CSS sent to a server?
    No. Everything runs in your browser using JavaScript regex operations. Nothing is uploaded, stored, or transmitted.
    How much will my file shrink?
    Typically 20-40% depending on comments and formatting. Well-commented CSS with generous whitespace saves more. The tool shows exact before/after byte sizes.
    Should I minify CSS during development?
    No. Keep your working CSS readable so you can debug it. Minification is a production-only step, usually handled automatically by your build tool (Vite, Webpack, esbuild). Use this tool for one-off minification when you don't have a build step, for example, inline email CSS or a static landing page.
    What's the difference between minification and compression?
    Minification removes source-code characters (comments, whitespace) before the file is served. Compression (gzip or brotli) is applied by your server on the already-minified file during transmission. They stack, a minified file gets compressed smaller than an unminified one.

    Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.