CSS Minifier

A CSS minifier reduces stylesheet size by removing comments and unnecessary whitespace and, when safe, applying small transformations such as shortening hex colors, reducing ordinary zero units, and removing final declaration semicolons. It should preserve CSS meaning rather than blindly deleting every space or character.

Paste CSS into the input panel or open a local .css file. Choose Safe minify or Aggressive review mode, configure comment, zero-unit, color, and semicolon options, then click Minify CSS or enable Live mode. Review the byte savings and warnings, then copy or download the minified stylesheet.

Yes. Safe mode tracks parenthesis depth and protects all URL function calls before processing whitespace. This means calc(100% - 20px), min(), max(), clamp(), and other functional notations are not damaged by whitespace removal. Review every complex calc() expression after minification and test the stylesheet in your target browsers.

Yes. Quoted content values, font names, escaped text, and quoted URLs are extracted into placeholder slots before any transformation. This prevents spaces, semicolons, punctuation, and comment-like text inside strings from being treated as removable CSS formatting.

Yes. The minifier detects url() function calls — including unquoted ones — and protects their entire content before whitespace is removed. This specifically prevents the data URL damage observed in Code Beautify, where SVG data URIs and percent-encoded values were corrupted. Review unusual embedded SVG, percent encoding, and semicolon-heavy data URLs after minification.

Custom property declarations (--my-var: value) and their values are handled conservatively because the browser interprets custom property contents lazily. The minifier does not assume a custom property value follows standard CSS syntax, so it avoids rewriting them like ordinary declarations.

Yes. Ordinary block comments are removed when the Remove comments option is checked. A Preserve /*! comments option keeps license, attribution, and other important comments that begin with the conventional important-comment marker, so build-tool directives are not silently discarded.

When enabled, safe color shortening converts repeated hexadecimal pairs such as #ffffff to #fff. In Aggressive review mode it also converts rgba(r,g,b,1) to a hex shorthand. Review brand colors, fallbacks, custom-property values, and compatibility requirements before deploying the result.

Safe zero-unit reduction converts ordinary values such as 0px, 0em, 0rem, and 0% to bare 0 where CSS permits it. It avoids values inside protected string slots and is intentionally conservative around complex or custom-property expressions.

Safe minify removes comments and whitespace, collapses identical-pair hex colors, and reduces zero units. Aggressive review additionally applies leading-zero reduction (0.5 to .5), converts rgba with alpha 1 to hex, and removes empty rule blocks. Aggressive mode is explicitly labeled as a review step — compare output, test in your project browsers, and inspect computed styles before shipping.

No. This lightweight browser tool does not silently discard declarations or merge rules. Duplicate declarations can be intentional progressive-enhancement fallbacks, so semantic optimization belongs in a project-aware CSS pipeline such as CleanCSS or cssnano with compatibility testing.

Yes. At-rules and their nested blocks remain in the output while structural whitespace is reduced. The minifier handles @media, @font-face, @keyframes, @supports, @layer, @import, and other at-rule forms without special-casing each one.

Yes. The workspace reports input bytes, output bytes, saved bytes, percentage reduction, rule count, removed comment count, protected value count, output lines, and warnings. You can inspect the full trade-off before copying or downloading the result.

No. Minification is not CSS validation. The tool reports a limited diagnostic for unclosed comments and unmatched parentheses, but project-level syntax checking, browser-compatibility validation, nesting support, and source-map checks belong in your build pipeline or a dedicated CSS linter.

Yes. Open a local .css file and process it entirely in the browser using the FileReader API. The dedicated client makes no upload requests, no fetch or XHR calls, no beacon events, and writes nothing to localStorage or sessionStorage. Processing disappears when you close or reload the tab.

Yes. Copy CSS sends the result to the clipboard using the Clipboard API. Download .css saves a minified.css file locally using a Blob URL. No server-side storage, account, or sign-in is required.

They are opposites. Formatting adds whitespace, indentation, and consistent spacing for developer readability. Minification removes non-semantic characters for smaller delivery files. ToolsSonic provides separate CSS formatting and CSS minification workflows so you can choose the appropriate intent for each task.

Any transformation can expose assumptions in complex CSS, generated styles, vendor hacks, custom properties, or browser-specific code. Safe mode is conservative, but always compare output, run browser tests, inspect computed styles, and keep your original source under version control before deploying minified CSS.

No. This tool is a lightweight browser utility focused on transparent local minification and reviewable reductions. It does not claim to replace a full project-aware optimizer with configurable compatibility presets, source maps, PostCSS plugins, rule merging, or dead-code elimination.

Smaller CSS files reduce render-blocking time and improve First Contentful Paint and Largest Contentful Paint. Minification reduces the raw byte size, which pairs well with server-side Gzip or Brotli compression. For critical CSS, inline the minified above-the-fold styles and defer the rest for maximum impact on page performance.

Minification reduces the number of characters in the CSS text itself by removing whitespace and comments. Gzip and Brotli compress the file at the transport layer using repetition-based algorithms. Both can be applied together — minify the CSS first, then let your web server apply compression. The savings are complementary: Gzip already handles repeated whitespace efficiently, but minification reduces token repetition that compression alone cannot eliminate.

The tool is completely free with no account required. It provides local paste and file processing, configurable safe controls, diagnostics, seven savings statistics, session history, copy, and download without sending any source code to a remote server.