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.

    Use it for one-off CSS snippets, email styles, or static pages when you do not have a build pipeline.

    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. Smaller blocking CSS helps the first render start sooner and can improve Core Web Vitals.

    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 for standard rules. 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 and quick in build pipelines. Handles minification, vendor prefixing, and CSS nesting in one pass. Often used in newer frontend projects.

    PurgeCSS / Tailwind JIT

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

    Worked Example: Minifying a Static Landing Page

    Priya has a single-page product microsite with a 34 KB hand-written stylesheet. There is no build step because the page is uploaded as plain HTML, CSS, and images.

    1. Keep the source file

    She keeps styles.css readable with comments and indentation. That is the file she edits later.

    2. Create a deploy copy

    She pastes the readable CSS into the minifier and downloads styles.min.css.

    3. Update the HTML link

    The page links to the minified file for production. The source file remains in the project folder as the editable copy.

    4. Test the result

    She reloads the page, checks buttons, forms, and responsive breakpoints, then uploads the minified file with the rest of the site.

    When Minification Is Not Enough

    Minification trims characters from rules you already have. It does not decide whether those rules are still needed. Large sites often need several CSS-size tactics working together.

    ProblemMinification helps?Better next step
    Too much whitespace and commentsYesMinify the production copy
    Unused framework classesOnly slightlyPurge unused selectors in your build step
    Large icon font CSSOnly slightlySubset the font or switch to inline SVG icons
    Critical CSS blocking renderSomewhatInline critical CSS and defer the rest
    No server compressionSomewhatEnable gzip or brotli on the server or CDN

    CSS Minification Edge Cases

    Data URLs

    CSS can contain embedded SVG or font data. A cautious minifier should not rewrite the contents of a data URL unless it understands that format.

    calc() spacing

    CSS requires spaces around + and - inside calc(). This tool preserves those spaces. If you use another minifier, verify your calc() expressions still work after minification.

    Custom properties

    Values inside CSS variables can be intentionally flexible. Some build minifiers avoid aggressive rewriting there because the variable may be used in several contexts.

    Source maps

    A production build can generate a source map so DevTools points back to your readable file. This one-off minifier produces only the CSS, not a source map.

    Safe Minification Checklist

    • Minify a copy. Keep the readable source file in your project and deploy the minified output separately.
    • Test responsive breakpoints. Minification should not change CSS behaviour, but testing catches pasted input mistakes.
    • Check the file link. If you download styles.min.css, make sure the HTML points to that exact filename.
    • Enable compression too. Minification and gzip or brotli work together. One does not replace the other.
    • Avoid minifying broken CSS. If the browser already ignores part of the file, minifying it will not fix the syntax error.

    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?
    For most CSS, no. Comments, indentation, and whitespace around selectors and property declarations are safe to remove. One exception: the CSS spec requires whitespace around the + and - operators inside calc() expressions, so this tool preserves those spaces. If you use a different minifier or build tool, verify your calc() expressions still work after minification.
    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.
    Does this remove unused CSS selectors?
    No. It removes whitespace, comments, and a few redundant characters, but it does not analyse your HTML or JavaScript to find unused selectors. Use a build tool with tree-shaking or a purge step when you need to remove whole unused rules.
    Should I keep a readable copy of the original CSS?
    Yes. Treat minified CSS as a deploy artefact, not the source you edit. Keep the readable file in your project, then minify a copy for production or a one-off embed.
    Can I minify CSS for HTML email?
    Yes, but test the email after minifying. Email clients can be strict about inline styles and old CSS support, so the minifier is useful for trimming size but it cannot verify client compatibility.
    Does minification change CSS specificity?
    No. Specificity comes from selectors, not whitespace. A selector such as .card .button keeps the same specificity after spaces and line breaks are removed.
    Can I minify CSS variables?
    Yes. CSS custom properties are kept as declarations. The minifier trims whitespace around them, but it does not rename variables such as --brand-primary.
    Why keep comments out of production CSS?
    Comments help during development, but they add bytes to the file your visitors download. Keep comments in the readable source file and remove them from the deployed copy.
    Can I paste only part of a CSS file?
    Yes. You can minify a single rule, a media query, or a full stylesheet. If you paste a partial block, make sure it still has balanced braces before using the output.

    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.