CSS Minifier

Minify CSS while preserving strings, cascade order, custom properties and license notices.

Compact CSS with a real parser, preserving rule order and empty cascade layers. Or beautify for readability. Source stays on this device and is never applied to this page.

Operation

Open a local UTF-8 CSS file (optional)

CSS input

Up to 100 KB / 100,000 characters of standard CSS and 500,000 output characters. The parser loads on first use. Sass, Less and build-time template syntax are not supported.

Minification removes syntax whitespace and regular comments, keeping /*! notices. It does not merge rules, delete empty layers, shorten colors or rewrite selectors. Custom-property token spacing and comments are retained. No imports or URL resources are fetched. Review in your site before replacing production CSS; parsing is not a compatibility or security audit.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Conservatively minify CSS with a parser, preserving cascade order and strings, or beautify it for review.

How to use it

1Paste standard CSS or open a local UTF-8 stylesheet.
2Choose conservative minification or two-space beautification.
3Review byte counts and output, then copy or download a separate CSS file.

What happens to your data

CSS stays on your device. It is never applied to the page, and imports or referenced URLs are not fetched.

Last updated October 2026

Minify CSS without using a brace-and-semicolon regular expression that can damage strings or change the cascade. This conservative minifier parses the stylesheet, removes unnecessary syntax spacing and keeps the order of rules, declarations and cascade layers. You can also beautify compact CSS into readable two-space indentation.

Smaller source is useful only when the page still looks and behaves correctly. An empty @layer declaration can establish precedence, and punctuation inside content strings is real data. This tool deliberately avoids aggressive transformations such as merging selectors or deleting empty layers. It prioritises a reviewable result over claiming the smallest possible file.

How it works

Paste standard CSS or open a local UTF-8 file. Minify uses CSSO's CSSTree parser and compact generator without its compression or restructuring passes. This preserves an empty layer such as @layer base {} and does not convert color notation or reorder declarations. Ordinary comments are removed; /*! notices and raw custom-property comments are retained. Custom-property token spacing is retained because those tokens may later be substituted into another property.

Beautify uses Prettier with two-space indentation and LF line endings. The first operation loads its parser on demand. Syntax with unclosed comments, strings, brackets or functions is rejected rather than repaired at the end of the file. Supported input is limited to 100 KB and 100,000 characters, nesting to 64 levels and output to 500,000 characters. The displayed byte saving measures uncompressed UTF-8 text, not gzip or Brotli transfer size.

The source is never applied to the page. An @import or url() is treated as CSS data, not a request to load the referenced resource. There is no dependency bundling, source-map generation, selector-usage analysis or Sass/Less compilation. Browser support for a declaration is separate from parser acceptance. Review a diff and test the result in your actual site before replacing the original stylesheet; a successful conversion is not a browser-compatibility guarantee.

Worked example: keep punctuation inside a CSS string

Input: a { content: "a;}b"; }
Result: a{content:"a;}b"}

The semicolon and closing brace inside the quoted value are not interpreted as declaration or rule boundaries.

Common use cases

Reducing CSS whitespace before reviewing a small stylesheet
Reading a compact stylesheet with two-space formatting
Preserving explicit cascade layer order
Downloading a separate local CSS copy without loading its resources

Frequently asked questions

Why does this minifier retain an empty @layer?＋

The first declaration of a named layer establishes its position in the cascade. Removing an empty declaration can change which later rule wins, even when all visible declarations remain.

Why are some custom-property spaces or comments still present?＋

A custom property stores a token stream that can be substituted later. The conservative generator preserves that raw value instead of assuming it is safe to rewrite like an ordinary property.

Is the reported reduction the same as website speed improvement?＋

No. It compares the UTF-8 source bytes. Actual loading depends on compression, caching, request overhead and the rest of the page. Use real page-speed measurements after integration.

Can I minify SCSS, Less or framework templates?＋

No. Compile them to standard CSS in their own build system first. This page does not load plugins or resolve project-specific variables and imports.

Does CSS get uploaded or run?＋

No. Parsing and formatting happen locally. Pasted CSS is not installed as a stylesheet, and its URLs are not fetched by this tool. A downloaded stylesheet should still be reviewed before use.

Standards and limitations

Used in these workflows

🎨Frontend Developer Toolkit

Related tools

Developer

Code Formatter

Format JavaScript, TypeScript, JSON, HTML or CSS with parser-aware indentation and downloads.

Design

CSS Unit Converter

Batch-convert CSS lengths with separate font, percentage and viewport references; export CSV.

Converters

Color Converter & Picker

Convert HEX, RGB and HSL colors with alpha, preview transparency and copy complete CSS values.

Text

Text Diff Checker

Compare two texts side by side. Highlight character, word, or line changes and download a private diff.