How to minify CSS online, free and without uploading
A CSS minifier makes a stylesheet smaller by removing what browsers do not need: comments, line breaks and spare spaces. Paste your CSS into the CSS Input box or click Upload Single File, and the Minified Output box fills in as you type. Original Size, Minified Size, Saved and Compression appear above the boxes in KB and in exact bytes. Click Copy Minified or Download .css to take the result. The sample on the page shrinks from 1,012 bytes to 758 bytes, which is 25.1% smaller.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). That includes the .css files you choose, which are read on your device, so it is safe for private or unreleased code. There is no account and nothing to install, and the tool sets no limit on file size.
Minifying changes how the file is written, not how it behaves. Strings, url() contents, escaped class names and custom property values are left as written, and a space is dropped only where the CSS grammar makes it meaningless. Number formatting is also tightened: #ffffff becomes #fff, 0.5 becomes .5 and 0px becomes 0. Rules are never merged and unused CSS is never removed.
Keep a readable copy of your source and minify only what you publish. To read a minified file again, use the CSS beautifier. The same job for other file types is done by the JavaScript minifier and the HTML minifier.
Table of Use: what changes and what is left alone
| In your CSS | Minified output | Why |
|---|---|---|
/* Main Styles */ | Removed | Ordinary comments are dropped |
/*! Licence */ | Kept | Preserve important comments is ticked by default; untick it to remove these too |
color: #ffffff | color:#fff | A hex colour made of three repeated pairs is shortened; #FF0000 becomes #F00 and the letter case is kept |
#ff000080 | Unchanged | Its last pair, 80, is not a repeated digit, so there is no lossless short form |
margin: 0px 0.5em | margin:0 .5em | Zero lengths lose their unit and the leading zero of a decimal is dropped |
calc(100% - 0px) | Unchanged | Inside functions the unit is required, so zeros are left alone |
flex: 1 1 0px | Unchanged | In the flex shorthand a bare 0 can be read as a flex factor instead of a length |
.menu :first-child | Unchanged | The space makes it a different selector from .menu:first-child |
--gap: 0px | --gap:0px | Custom property values keep their text, because scripts and calc() may read them back |
The last ; before a closing brace | Removed | It is optional there; repeated semicolons collapse to one |
Other data formats shrink the same way with the JSON minifier and the SQL minifier.
Features
- Paste, type or upload. Upload Single File puts a .css file into the CSS Input box, where you can edit it before copying. The output updates as you type, and Copy Minified and Download .css wait while it shows Minifying…
- Batch Upload (Multiple Files). Select several .css files and each is minified on its own. The results list shows every file with its size before and after and the percentage saved, and Download All (ZIP) saves them as
minified-css.zip, withtheme.cssstored astheme.min.cssand a repeated name astheme.min-2.css. - Size statistics. Original Size, Minified Size, Saved and Compression are shown in KB to two decimals and in exact bytes, counted as UTF-8, the way the file is saved.
- Preserve important comments. One checkbox keeps the
/*! ... */comments that carry licences and attribution. - Careful with meaning. The CSS is tokenised first, so strings,
url(), data URIs and backslash escapes such as.md\:flexare never edited, and spaces insidecalc()are kept. - Number tidy-ups. Shortens six- and eight-digit hex colours when every pair repeats, drops the leading zero of decimals, and removes the unit from zero lengths in px, em, rem, ex, ch, vw, vh, vmin, vmax, cm, mm, in, pt, pc and q.
- Copy, download, clear. Download .css saves
minified.css. If the browser blocks clipboard access, the Copy button asks you to select the text yourself.
How to use the CSS minifier
- Paste your CSS into the CSS Input box, or click Upload Single File and choose a .css file. Click Clear first if you want to empty the sample.
- Under Minification Options, leave Preserve important comments (/*! ... */) ticked to keep licence comments, or untick it to remove every comment.
- Read the result in Minified Output and check Original Size, Minified Size, Saved and Compression above the boxes.
- Click Copy Minified to copy it, or Download .css to save
minified.css. - For many files, set the checkbox first, click Batch Upload (Multiple Files), pick the files, review the list under Batch Processing Results and click Download All (ZIP).
Who can use it
- Front-end developers who want a quick minified build of a stylesheet without setting up a bundler.
- Site owners pasting custom CSS into a theme or page builder, who can preview the page first in the HTML previewer.
- Sass users who compile with the SCSS to CSS converter and then minify the output, or start from plain CSS with the CSS to SCSS converter.
- Students who want to see how much of a file is formatting, by comparing the bytes before and after.
- Designers handing over styles built with the CSS grid generator or the box shadow generator, in a compact file.
FAQs
How do I minify CSS online?
Paste your CSS into the CSS Input box or click Upload Single File. The Minified Output box fills in straight away, with Original Size, Minified Size, Saved and Compression shown above the boxes. Click Copy Minified to put the result on your clipboard or Download .css to save minified.css. For several files at once, use Batch Upload (Multiple Files) and then Download All (ZIP).
Will minifying change how my CSS works?
It should not. The minifier reads the CSS token by token, so quoted strings, url() values and escaped class names are copied as written, and spaces that matter are kept: .menu :first-child stays different from .menu:first-child, and the spaces around + and - inside calc() stay. Only comments, spare whitespace, the last semicolon in a block and some colour and number formatting change. Test the result before you deploy it.
How much smaller will my CSS get?
It depends on how much whitespace and how many comments the original has, and the stats show the exact figure for your file. The sample loaded on the page goes from 1,012 bytes to 758 bytes, a 25.1% saving. The tool does not merge rules or remove unused CSS, so the saving comes only from formatting; a server that sends gzip or Brotli shrinks the file further.
How do I keep a licence comment when I minify?
Leave Preserve important comments (/*! ... */) ticked, which it is by default. A comment that starts with /*! is then kept, and every other comment is removed. Untick the box to drop all comments, and the sample loses a further 41 bytes. The box also applies to files you add with Batch Upload (Multiple Files), using its state at the moment you choose the files.
Can I minify several CSS files at once?
Yes. Click Batch Upload (Multiple Files) and select your .css files. Each one is minified, and the list shows its size before and after with the percentage saved. Download All (ZIP) then saves minified-css.zip, with one file per source named like site.min.css. If two uploads share a name, the second gets -2 before the extension so neither is overwritten.
Does it remove unused or duplicate CSS?
No. It changes formatting only. Rules, selectors, declarations and their order are kept, so a duplicated rule stays duplicated, and colour names, rgb() values and long margin shorthands are not rewritten. Removing unused CSS needs a tool that knows your HTML, such as a build-time purge step. Use this minifier as the last, safe step before you publish the file.
How do I turn minified CSS back into readable code?
Use the CSS beautifier, the reverse of this tool. Paste the minified stylesheet, choose 2 spaces, 4 spaces or Tab, and each declaration goes on its own line again. Comments that a minifier removed cannot be restored, so keep your readable source files and minify only the copy that you publish.
Is my CSS uploaded anywhere?
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). Pasted text and chosen files are read and minified on your device. The one extra request you may see is this site’s own zip script, loaded the first time you click Download All (ZIP), and no CSS travels with it.