liminfoCSS Minifier
Free web tool: CSS Minifier
About CSS Minifier
The CSS Minifier is a free browser-based tool that compresses your CSS code by applying a series of text transformations designed to reduce file size without changing how the styles render. It removes block comments (/* ... */), collapses consecutive whitespace and line breaks to single spaces, strips spaces around structural characters like braces, colons, semicolons, and commas, removes trailing semicolons before closing braces, shortens six-digit hex colors where possible (e.g., #ffffff → #fff), and drops the unit suffix from zero values (e.g., 0px → 0). All transformations are applied client-side with no server round-trips.
Web developers and build-pipeline engineers use CSS minification to reduce the size of stylesheets shipped to users, improving page load speed and Lighthouse performance scores. While production build tools like webpack, Vite, and esbuild include CSS minification in their pipelines, this online tool is useful for quick spot-checks, debugging minified output, or preparing CSS snippets for inline use in HTML email templates or CMS platforms that do not support build tools.
The tool measures and displays the original byte count, the minified byte count, and the percentage saved so you can immediately assess the impact of minification. Typical CSS files see 20–40% size reductions through whitespace removal and comment stripping alone. If you also use techniques like shorthand merging or unused rule removal (not performed here), the savings can be even greater. The output is displayed in a read-only textarea and can be copied to the clipboard in one click.
Key Features
- Removes all CSS block comments (/* ... */) including multi-line comments
- Collapses all whitespace and newlines between tokens into single spaces
- Strips spaces around braces {}, colons :, semicolons ;, commas ,, and combinators > ~ +
- Removes trailing semicolons before closing braces to shorten each rule block
- Shortens 6-digit hex colors to 3-digit form where all pairs are repeated (e.g., #aabbcc → #abc)
- Drops unit from zero values: 0px, 0em, 0rem, 0% all become plain 0
- Displays original bytes, minified bytes, and percentage saved in a result summary panel
- One-click copy of minified output — paste directly into any production stylesheet
Frequently Asked Questions
What does CSS minification actually do?
Minification removes all characters that are not required for the stylesheet to function correctly — comments, indentation, newlines, and unnecessary spaces. It also applies shorthand substitutions like 3-digit hex colors and unitless zeros. The resulting CSS is functionally identical to the original but takes fewer bytes to transfer over the network.
How much file size can I expect to save?
For typical hand-written CSS with comments and formatting, minification usually reduces file size by 20–40%. Files with many comments or generous whitespace can see savings of 50% or more. The tool shows the exact byte counts and percentage saved so you can see the impact for your specific file.
Will minifying CSS break my styles?
The transformations in this tool are safe and preserve the semantics of every CSS rule. Comment removal, whitespace collapsing, and hex/zero shortening do not change how any selector or property behaves. If you see unexpected style changes after minification, the original CSS likely had a bug that the minifier exposed, not introduced.
Does this tool remove unused CSS rules?
No — this is a minifier, not a purger. It only compresses the code you provide; it does not analyze which classes are actually used in your HTML and remove the rest. For unused CSS removal, use tools like PurgeCSS, UnCSS, or Tailwind's built-in content scanning.
Should I use this instead of webpack or Vite CSS minification?
For production projects, use your build tool's built-in CSS minification (css-minimizer-webpack-plugin, Vite's built-in LightningCSS, or PostCSS with cssnano). This online tool is best for quick one-off minification, preparing inline CSS for HTML emails, or checking how a snippet will look when compressed.
What is the hex color shortening rule?
A 6-digit hex color can be shortened to 3 digits when each pair of digits is identical: #aabbcc becomes #abc, #ffffff becomes #fff, #112233 becomes #123. Colors like #a1b2c3 cannot be shortened because the digit pairs (a1, b2, c3) are not doubles. The minifier only applies this transformation when it is safe.
Why does the tool remove units from zero values?
In CSS, 0px, 0em, 0%, and 0rem are all equivalent to the unitless 0. The browser does not need the unit to interpret the value. Removing the unit shortens every zero value by 2–3 characters, and stylesheets often contain many zero values for margin, padding, border-width, and similar properties.
Can I minify Sass or Less with this tool?
No — this tool only processes plain CSS syntax. Sass (.scss/.sass) and Less (.less) use additional syntax features like variables, nesting, and mixins that require their respective preprocessors to compile to CSS first. Compile your Sass or Less to CSS first, then paste the output here for minification.