CSS Minifier — Compress CSS Files Online
Minify CSS by removing comments, whitespace, and unnecessary characters. Shows compression percentage.
About CSS Minifier — Compress CSS Files Online
CSS Minifier removes comments, whitespace, and redundant characters from stylesheets in real time. See Before→After byte counts and savings % on a visual bar. Copy to clipboard or download as a .css file — no sign-up, nothing sent to a server.
How to Use
- 1Paste your CSS into the left input area. The minified output appears on the right instantly.
- 2Toggle "Remove comments" and "Keep /*! important comments */" in the toolbar as needed.
- 3Check the reduction bar at the bottom for Before/After byte counts and savings %.
- 4Click "Copy" to copy to clipboard or "DL" to download a minified .css file.
Features
- Real-time minification — results and byte savings appear as you type
- Visual Before→After bar shows exactly how much was reduced
- Reduces CSS file size to improve Core Web Vitals (LCP) scores
- Option to retain important comments (/*! ... */) for licence notices
- Runs entirely in your browser — no upload, no sign-up required
CSS Minification Techniques
CSS minifiers apply several transformations to reduce file size. Understanding what is removed helps you verify the output and troubleshoot any issues that arise.
Whitespace, Comments, and Shorthand Merging
The most straightforward minification step is removing all whitespace — spaces, tabs, and newlines — that exists purely for formatting. Comments (/* ... */) are also stripped unless they begin with /*! which marks licence notices. Beyond simple removal, sophisticated minifiers also merge shorthand properties: for example, separate margin-top, margin-right, margin-bottom, and margin-left declarations can be collapsed into a single margin shorthand. Zero value optimization converts 0px, 0em, 0rem to just 0, since units are unnecessary when the value is zero. Color values like #ffffff can be shortened to #fff.
What Minification Does Not Change
Basic CSS minifiers only strip whitespace and comments without reordering rules, merging selectors, or modifying property values beyond safe shorthand conversions. This means the cascade order of your rules is preserved exactly, which is important because CSS specificity and declaration order determine which styles apply. Vendor prefixes like -webkit- and -moz- are also preserved as-is. The output of a good minifier is semantically identical to the input — just smaller. Always test minified CSS against your full browser target list to confirm rendering is unchanged.
CSS Performance Impact
CSS is a render-blocking resource — the browser must download and parse all CSS before painting the page. Reducing CSS size directly improves Core Web Vitals scores, particularly Largest Contentful Paint (LCP).
Render-blocking CSS and Critical CSS
By default, CSS linked in the <head> blocks rendering until fully downloaded and parsed. For large stylesheets, this delay is visible as a flash of unstyled content or a slow initial render. One common optimization is extracting "critical CSS" — the styles needed to render above-the-fold content — and inlining them in the <style> tag of the HTML document. The rest of the stylesheet is then loaded asynchronously. Minifying both the critical CSS and the deferred stylesheet maximizes the benefit of this pattern.
Deferred Loading and HTTP/2
With HTTP/1.1, developers combined all CSS into a single file to minimize request count. With HTTP/2 and HTTP/3, which support multiplexing (sending multiple requests over a single connection), it is viable to split CSS into multiple smaller files loaded in parallel — each minified individually. For deferred non-critical CSS, use rel="preload" as="style" onload="this.rel='stylesheet'" to load it without blocking rendering. In all cases, minifying before delivery reduces bytes transferred and speeds up time-to-interactive.
FAQ
- How much smaller will my CSS get?
- Typical savings range from 20–50%. Results depend on how many comments and whitespace characters your original file contains.
- Will minification break my CSS?
- The minifier only strips whitespace and comments — it does not rewrite or reorder rules, so the output is functionally identical to the input.
- What are important comments (/*!)?
- Comments starting with /*! are commonly used for licence and copyright notices. Enable "Keep /*! important comments */" to retain them while removing regular comments.
- Does it support SCSS or Less?
- This tool works with plain CSS only. For SCSS/Less, compile to CSS first using a build tool, then minify here.
- Should I use this in production or a build tool?
- This tool is great for quick checks and one-off files. For automated production builds, use webpack, Vite, or PostCSS to minify CSS as part of your pipeline.
Found a bug or something not working as expected?
Report a bug →