CSS Minifier

Paste a stylesheet into the Your CSS box and the minified result appears on the right as you type. Above the boxes, four figures show the original size, the minified size, the percentage saved and the size of both versions after gzip. Copy the result, or download it as a .min.css file.

This CSS minifier does the safe, predictable work: it removes comments and spaces, drops the last semicolon in each block, shortens values such as 0px, 0.50 and #ffffff, and removes empty rules. Switch Mode to Beautify (unminify) and the same page turns compressed code back into indented, readable lines.

Everything runs in your browser. Your code is not uploaded, so it works the same way for a public theme and for private client work.

Browsers do not need the spaces, line breaks and comments that make a stylesheet pleasant to write. Minifying removes them and writes some values in a shorter form that means exactly the same thing. The page looks identical; the file is simply smaller, so it downloads a little faster and takes less room in caches.

The table lists every change this CSS minifier makes. Removing spaces, ordinary comments and the last semicolon always happens, because that is the core of minifying. The other changes each have their own checkbox.

A CSS minifier online should be quicker than opening a terminal, and here there is no button to press: the result updates as you type or paste. That makes it handy for a one-off file, a snippet for the custom CSS box of a website builder, an email template, or a quick look at how much a stylesheet would shrink.

The Saved figure is the share of bytes removed, measured in UTF-8 just as a server would send them. Hand-written code with comments and generous indentation shrinks the most. Code that is already compact shrinks much less, and that is normal.

The Clear link empties the box when you want to start over. If the code cannot be read, an error panel replaces the result and tells you the line where the problem starts.

The usual worry when you minify CSS online is that a careless tool joins things that must stay apart. This page reads the code piece by piece first: quoted strings, url() values and comments are set aside before any space is removed. A content value such as " › " keeps its spaces, and a font name in quotes stays exactly as written.

Inside brackets, the spaces that matter are kept. calc(100% - 2rem) needs the spaces around the minus sign, and it keeps them. var(), rgb() and other functions are handled the same way.

Selectors are treated with care too. a:hover and a :hover mean different things (the second matches any hovered element inside a link), so the space before :hover is kept. Spaces around >, + and ~ and after commas are removed, because they never change the meaning.

One small change you may notice: the space before !important goes, so color: red !important becomes color:red!important. Browsers read both the same way.

The page is a CSS minifier free to use as often as you like: no account, no daily limit, and nothing added to your output, not even a banner comment. What you copy is your own code, only smaller.

Because the work happens on your device, the practical limit is your device itself. Typical stylesheets update as you type; a very large file may take a moment on an older phone.

People often say minifier and compressor as if they were the same thing, but they are two separate steps. Minifying rewrites the code itself. Compression, such as gzip or Brotli, is done by the web server when it sends the file, and the browser unpacks it. A good setup uses both, and this CSS minifier and compressor view shows both results side by side.

The With gzip figure is measured in your browser with the built-in CompressionStream feature. It compresses the original and the result and shows the two sizes as original → minified.

You will notice that gzip shrinks the original a lot by itself, and that the gap after gzip is smaller than the Saved percentage suggests. That is expected, because gzip is very good at squeezing repeated spaces. Minifying still helps: the browser has fewer bytes to download and read, and comments meant for developers stay out of production.

The page cannot switch on gzip or Brotli for your site; that is a setting on your web server, host or CDN. If your browser does not support CompressionStream, the With gzip box shows dots instead of numbers, and the minified result is not affected.

To minify CSS file by file from your computer, press Open CSS files and pick a .css file. It loads into the box, and the Download button names the result after it, so theme.css is saved as theme.min.css.

Pick several files at once and they are joined into one, in the order you picked them. With Mark where each file starts when joining ticked, a comment with the file name is placed before each file in the Your CSS box, so you can see where one ends and the next begins, and match an error line to the right file. These markers are ordinary comments, so they are removed from the result. A joined result downloads as styles.min.css.

Joining is useful for small sites that load several stylesheets: one request instead of several. Keep the same order as in your HTML, because when two rules have the same specificity, the later one wins.

The picker also accepts .scss and .less files, but they are read as plain CSS. Sass and Less features such as // comments, variables and mixins are not compiled, so compile them to CSS first and minify the output.

A css compressor online is the right choice for quick, one-off jobs: a stylesheet for a landing page, code pasted into a website builder, a theme file you edit by hand, or a check before you send code to a client.

For a site you deploy often, put minification in your build instead, so it happens every time without copying and pasting. Bundlers and CSS build tools can minify as part of the build, and they can also do the deeper work described further down this page, because they see your whole project.

Both approaches are fine. Use this page when it saves you time, and use a build step when the same file changes every day.

Switch Mode to Beautify (unminify) and the page works as a css beautifier online: each rule gets its own block, each declaration its own line, and blocks inside @media are indented one level deeper.

Under Indent, choose 2 spaces, 4 spaces or Tab to match your editor or your team's style. A selector list such as .button:hover,.button:focus is split so that each selector sits on its own line, and a blank line separates top-level rules.

Beautify does not change your values. It does not shorten colours or zeros, and it does not undo shortening either. Use it to read and edit code, then switch back to Minify when you are done.

A css unminify step puts the line breaks and indentation back so a person can read the code. That part works fully: the selectors, declarations and @media blocks come back in a clean, consistent layout.

What cannot come back is anything the original minifier threw away. Removed comments are gone for good, personal formatting such as aligned values is lost, and if a build tool merged or reordered rules, they stay that way. Beautify itself keeps only /*! comments and removes any other comments it finds.

If you need the original source with its comments, look for an unminified file next to the minified one, often with the same name without .min, or ask whoever built it for the source.

Turning css minify to normal, readable code is mostly a debugging job. You find a style problem on a live site, open its stylesheet and see one endless line. Paste it here in Beautify mode, and you can search it, read it and find the rule you need.

To see what changed between two versions of a stylesheet, beautify both with the same indent and compare them in the Diff Checker. Because the layout is identical, only real changes show up.

Browser developer tools can also pretty-print a stylesheet, but a beautified copy that you can paste, keep and compare is often handier.

The CSS minifier, the beautifier and the gzip measurement all run inside this page. Your code is not uploaded and not saved; only your settings are remembered in this browser.

That makes the page suitable for code under an NDA, unreleased designs and client themes. You can check it yourself: open your browser's network panel while you paste, and you will see no request carrying your code.

Working with other front-end files? The JSON Formatter tidies and checks JSON config files, and the Diff Checker compares two versions of a stylesheet line by line.

Need visuals for your styles? The Gradient Generator helps you build gradient backgrounds, Compress Image makes background images and photos smaller, and the Favicon Generator makes the small icons your HTML links to.