Skip to developer tool
DEVELOPER TOOLKIT CODE & FORMATTING

CSS Minifier & Compressor

Produce a compact stylesheet while keeping a readable source copy. Load a CSS file or paste source, choose how much optimization to allow and inspect the actual UTF-8 byte reduction before exporting.

Local processing · No account required · Copy and export

Open workspace Read the guide
BUILT FOR THE DETAILS
  1. 01Add your input
  2. 02Inspect & adjust
  3. 03Use your result
Browse developer tools

Workspace

PixelOkay · Developer tools
Compression statistics appear here.

Uses CSSO in a background worker; the library loads from a CDN. Test optimized output, especially when working with legacy stylesheets or unusual syntax.

How to use CSS Minifier & Compressor

  1. Paste CSS or load a .css file. The loader suggests a minified filename while leaving the original file unchanged.
  2. Choose basic optimization or advanced rule restructuring. Decide whether to retain important /*! comments, including license notices.
  3. Minify in a background worker. Review the output and byte counts, then copy it or download the selected filename.

When to use this tool

Reduce stylesheet source bytes for a build or a small standalone page. Keep license comments as required and test layout after optimization; minification alone does not measure compressed transfer size.

Minification, restructuring and transfer compression

Basic mode removes unnecessary formatting and optimizes syntax and values without enabling rule restructuring. Advanced mode also allows CSSO to merge and restructure rules. Important exclamation comments are preserved by default; ordinary comments may be removed. The displayed byte saving compares the original and result encoded as UTF-8, before gzip or Brotli.

Worked example

Input: .card { color: #ffffff; margin: 0px 0px; }
Possible compact output: .card{color:#fff;margin:0}
Exact output can vary with the optimization preset.

Limits and output checks

CSS minification is not a complete performance audit. Savings depend on the input, and minification is different from server compression. Review advanced output against your actual pages, especially experimental CSS. Keep the original source; this page does not generate source maps or compile Sass/Less.

Reference: CSSO optimization and comment options.

Frequently asked questions

Should I keep important comments?

Keep required copyright and license notices. The default retains comments starting with /*!; it does not decide which notices your project must preserve.

Does a smaller byte count mean the page loads that much faster?

No. Network compression, caching, request latency and rendering affect real loading time. The statistic reports raw UTF-8 source bytes only.

Can I minify Sass or Less directly?

No. Compile those languages to ordinary CSS first, then minify the generated stylesheet.

Minify compiled CSS, not a preprocessor source

Supply ordinary CSS and choose the available optimization settings. Keep the editable source and review the result in its intended stylesheet context.

Scope of this workflow

This does not compile Sass or Less or produce source maps. Raw byte savings do not measure network transfer or loading speed.

Code Beautifier Online - JS, JSON, HTML & CSS · All developer tools · Privacy policy · Contact PixelOkay