CSS Minifier
FREE TOOL · NO SIGN-UP
This CSS minifier shrinks your stylesheet by removing comments, whitespace, line breaks and other characters browsers don’t need. Paste your CSS code, choose your options, and click Minify CSS. You can keep /*! important */ license comments, shorten hex colors like #ffffff to #fff, and drop units on zero values. The tool shows the original size, minified size and percentage saved, and gives you the result ready to copy or download as style.min.css.
What CSS Minification Removes
CSS minification is the process of making a stylesheet smaller without changing how it works. Developers write CSS with indentation, line breaks, spaces and comments so it is easy to read and maintain. Browsers don’t need any of that. They only need the selectors, properties and values.
A minifier strips out the extra characters:
- Comments such as
/* Header styles */ - Whitespace used for indentation and alignment
- Line breaks between rules and declarations
- Spaces around symbols like
{,},:,;,,and> - The last semicolon before each closing brace
- Empty rules that contain no declarations
With the optional settings in this tool, it can also shorten six-digit hex colors to three digits where possible, remove units from zero values (0px becomes 0), and drop leading zeros from decimals (0.5em becomes .5em).
The result is one dense line of minified CSS. It looks unreadable to people, but browsers parse it exactly the same way. Smaller files take less bandwidth to download, which helps pages render faster, especially on mobile networks.
How the Minifier Processes Code
The minifier works in a safe order. First it protects anything that must not change, then it compresses everything else, then it puts the protected parts back. This approach avoids the most common way simple minifiers break styles: editing text inside quoted strings.
After compression, the tool measures the original and minified sizes in bytes and shows how much you saved.
Stripping comments and whitespace safely
The minifier scans your CSS character by character. When it finds a quoted string, such as a content: "→ Next" value, a font name or a URL in quotes, it sets that string aside untouched.
When it finds a comment, it removes it, unless the comment starts with /*! and the “Keep /*! important */ comments” option is on (the default). That convention is used for license and copyright notices that must stay in distributed files.
Then it collapses runs of whitespace into single spaces, removes spaces around braces, semicolons, commas and child combinators, tightens spaces inside parentheses, and removes the space before !important.
What stays untouched in selectors and values
The minifier doesn’t rewrite your logic. It doesn’t merge rules, reorder declarations, combine shorthand properties or remove “unused” selectors, because those changes can alter how styles cascade.
Quoted strings are restored exactly as written. Selectors keep their meaning: spaces that act as descendant combinators, such as in .nav a, stay in place. Units on non-zero values, color names, custom properties and @media queries are kept. Time values like 0s are left alone, since only length units are removed from zeros.
How to Minify a Stylesheet in Three Steps
- Paste your CSS. Copy your stylesheet from your code editor, theme files or a CDN URL you have opened, and paste it into the “Your CSS” box. You can paste a single rule or thousands of lines.
- Choose options and minify. All three options are on by default: keep
/*!comments, shorten hex colors, and drop units on zero. Untick any you don’t want, then click Minify CSS. The stats show the original size, minified size and percentage saved. - Copy or download. Click Copy to put the minified CSS on your clipboard, or Download to save it as
style.min.css. Replace the file on your site, or paste it into your theme’s custom CSS field, then test the page.
Keep your original, readable file as the source you edit. Minify again whenever you change it. The tool runs 100% in your browser, so your code is never uploaded.
How Much File Size You Actually Save
Savings depend on how the original CSS was written. Well-commented stylesheets with generous indentation shrink the most. Hand-written CSS with lots of comments and spacing often drops by a large share of its size. CSS that is already compact, or was generated by a tool, may shrink only a little.
The “Saved” stat tells you the exact percentage for your file, so test your own code rather than relying on general figures.
Keep the numbers in perspective. Saving 20 KB on a large theme stylesheet matters, particularly for mobile visitors on slow connections. Saving 200 bytes on a tiny snippet doesn’t change much. Minification is most useful on the large, render-blocking stylesheets every page loads.
Also remember that your server likely compresses files on the way to the browser, which shrinks CSS much further. Minification and compression stack, as the next section explains.
Minification Versus Gzip and Brotli
Minification and compression are different steps that work well together.
Minification permanently removes unnecessary characters from the file itself. The minified file is smaller on disk and smaller before any compression.
Gzip and Brotli are compression formats applied by the web server or CDN when the file is sent. They find repeated patterns and encode them more efficiently, and the browser decompresses the file on arrival. Brotli usually compresses text files a little better than Gzip.
Compression often shrinks CSS more than minification does. But doing both gives the smallest transfer size, because compression works on whatever you give it. A minified file also uses slightly less memory and parses a touch faster.
Most hosts and CDNs enable compression automatically. You can check in your browser’s developer tools: in the Network tab, look for a content-encoding value of gzip or br on your CSS file.
Page Speed and Core Web Vitals Impact
CSS is render-blocking by default. The browser won’t display a page until it has downloaded and parsed the stylesheets in the head. Smaller stylesheets arrive sooner, so content can appear earlier.
That links CSS size to Core Web Vitals, especially Largest Contentful Paint (LCP), which measures how quickly the main content shows. Minifying large stylesheets can help, along with removing unused CSS and inlining a small amount of critical CSS for content above the fold.
Be realistic about the effect. Minification is one of many page speed improvements. Large images, slow servers and heavy JavaScript usually have a bigger impact. Lighthouse and PageSpeed Insights flag unminified CSS when it is worth fixing, so check their recommendations to see whether it matters for your site.
Minification Mistakes That Break Styles
- Editing the minified file. Changes are hard to make and easy to break. Always edit the readable source and minify again.
- Minifying broken CSS. A missing brace or semicolon in the source can cause more rules to fail once everything is on one line. Validate your CSS first.
- Zeros inside calc(). Inside
calc(), a unitless zero can be invalid, socalc(100% - 0px)should keep its unit. If you use zeros incalc(), untick “Drop units on zero” or check the output. - Removing license comments. Some licenses require the notice to stay. Keep the
/*!option on. - Caching the old file. Browsers and CDNs may keep serving the old version. Clear caches or rename the file, for example
style.v2.min.css. - Double minification by plugins. Running a minifier plugin on top of already minified files can cause conflicts. Use one method.
- Not testing. Check key pages on desktop and mobile after replacing a stylesheet.
When to Use Build Tools Instead
An online CSS minifier is ideal for one-off jobs: a small site, a landing page, a theme tweak or a quick test. For projects you update often, automate the step.
Build tools such as PostCSS with cssnano, clean-css, or the minification built into bundlers like Vite and webpack can minify CSS every time you build. They also handle source maps, which map minified code back to the original lines for debugging, and work well with SCSS or Sass workflows.
On WordPress, caching and performance plugins often include CSS minification. If you use one, don’t also upload manually minified files for the same stylesheets. Pick a single method so nothing gets processed twice.
Keeping a Readable Source Copy
Always keep the original, readable CSS as your master file, ideally in version control. Name the minified output clearly, for example style.min.css, so it is obvious which file to edit and which to serve. If you only have a minified file, use the CSS Beautifier to format it again before making changes.
Shipping Lean CSS to Every Visitor
Write readable CSS, minify it for production, compress it on the server, and test after each change. Format minified code with the CSS Beautifier, shrink markup with the HTML Minifier, compress scripts with the JavaScript Minifier, and explore the FHSEO Hub free SEO tools page.