24 Free Online CSS Minifiers To Minify CSS Files

October 9, 2021 Ashiq

0 Shares

List of Online CSS minify — Image Source

If you have ever analyzed your site on GTMetrix.com or any other webpage testing/analyzing tools you have definitely had stumbled upon the “Minify CSS” recommendation. Free online CSS minifiers can certainly improve your web page performance by decreasing page load time. According to Kissmetrics 40% website visitors abandon a website that takes more than 3 seconds to load, 1-second delay (or 3 seconds of waiting) decreases customer satisfaction by about 16%. So bottom line, you need to speed up your web page load time. CSS minification does exactly that, But first, you should know what “code minify” means. According to Wiki –

“Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.”

So code minification means it will remove white spaces, new lines, block delimiters and comments to minimize your file size. But for someone new or have very little experience in coding minifying code can be a gruesome task. And that is why I have listed down all the online CSS minifiers. So that anyone can copy or upload their raw CSS code, minify and use it instantly without worrying about anything.

CSS Minifying Manually

Before using the online CSS minifiers, Note that you can manually minify your CSS file without using any tools. For example. This is your typical raw CSS codes look like with line breaks and comments :

/*--------------------------------------------------------------
 ## Site Branding
 --------------------------------------------------------------*/
 .site-branding {
 width: 80%;
 }

/*--------------------------------------------------------------
 ## Site Navigation
 --------------------------------------------------------------*/
 #site-navigation{
 float: left;
 width: 1%;
 margin-top: 2%;
 }

Now remove comments, line gaps and extra spaces and above code will look like this:

.site-branding {width: 80%;}#site-navigation{float: left;width: 1%;margin-top: 2%;}

This is how you do CSS minification manually, But this is too much a repetitive task and certainly an error-prone method. I would not recommend it unless you have to do it. It’s better to minify your CSS code online and copy from there.

Online CSS Minifier

cssminifier

Minify/compress your CSS codes with options included to download a file, An API for use and many useful plugins like – Django Helper, Sublime Text 2 plugin, Krusader File Manager and PHP library.

2. minifier

This minifer gives you the option to strip all comments, super compact, keep indentation, remove the last semicolon.

3. freeformatter.com/css-minifier

Based on the Yahoo YUI Compressor, It

Removes useless white spaces, indentation characters, and line breaks
Strips all comments
Removes the last semi-colon of a style declaration and extra semi-colons
Removes empty CSS declarations
Removes units when using zero values
Removes the leading 0 if a float value is lower than one
Chances RGB color values to a shorter hexadecimal format
Hexadecimal colors following the pattern #AABBCC are reduced to #ABC
Keeps a single charset per CSS file removing all extra declarations
None values are converted to 0 whenever safe to do so

You can copy-paste your CSS or type the URL of the file and minify.

4. cleancss.com/css-minify

A big box to paste your CSS code and result will be shown in the same field, simply does the job.

5. cnvyr.io

You can minify as well as gzip your CSS code from this website. It also has the same options for JavaScript and an image manipulation tool.

6. minifier.org

A minify project of Peter Finland, MIT-licensed you can minify both CSS and JavaScript also shows the bytes you saved by minifying your code.

7. css-minifier.com

An online minifier with lots of options to choose from. Options are –

Highest (No readability, Smallest size)
High (Moderate readability, Smaller size)
Standard (Balance between readability and size)
Low (Higher readability)

There are more options like – Discard CSS properties (CSS 3.0, CSS 2.1, CSS 2.0 and CSS 1.0), Add time stamp to final CSS, Compress colors, Compress font-weight, Remove unnecessary backslashes and Remove last semi-colons.

8. css-beautify-minify

By directing file URL or uploading your CSS file you minify and beautify your CSS code in this site. There’s also an option to validate your CSS code.

9. minifycode.com/css-minifier

You just minify your CSS code. There’s no other option or any extra options like the other services and there’s a CSS beautifier as well.

10. browserling.com/tools/css-minify

Another site to minify CSS also has a CSS prettifier tool.

11. countwordsfree.com/css-minify

Based on the YUI Compressor as the main parameters of the css minifier. It

stripping comments and white spaces
stripping the last semicolon
removal of extra semicolons
removal of empty declarations
optimizing of empty values
transforming color values
stripping out of duplicated charsets
opacity filtering shortening
optimizing of null values

12. webtoolkitonline.com/css-minifier

A website geared towards online tools for developers does your CSS minify quite conveniently. There are other useful CSS tools like – Less to CSS converter and CSS formatter.

13. foo123.github.io

An excellent online CSS processor and minifer with a lot of options such as – Minify, Beautify, Remove comments, Add vendor prefixes, Apply fallback polyfills, Convert HSL(A) to RGB(A), Convert RGB(A) to HEX and line wrapping. Also, have several “server only” options like – Embed Image, Embed fonts and Embed Import.

14. beautifytools.com/css-minifier

You can minify and compress your CSS code by removing white spaces, newlines, indentation and comments with options to load from URL and uploading file. There’s an option for beautification as well.

15. codeamaze.com/code-minifier/css-minifier

Gives you the option to load the file from URL and load from file, you can download the minified file or copy the codes.

16. devotter.com/css-minifier

Based on clean-CSS you need to drag and drop your CSS file in order to minify it. It uses the same tool behind the popular gulp-cssmin plugin.

17. minifycss.io

This site both minify and compress our CSS. You can either upload the CSS file or load it from the URL.

18. minifyweb.com/minify-css

This website has one unique feature that none of the other minifiers have. You can combine multiple CSS files into one minified CSS file. You can either paste the CSS file URL or paste the raw code. So far I’ve tried to minify 11 files and it worked. I’m not sure whether there’s a file limit but nonetheless, minifying 10 files at the same time is definitely a lot for anyone.

19. tutorialspoint.com/online_css_minifier

Another simple tool from tutorialspoint.com, You can simply paste the CSS code and it will automatically minify the code. You can either copy the codes or download as a file.

20. css-minify.online-domain-tools.com

Minifies you CSS code with options such as –

Put each CSS rule on a separate line
Disable advanced optimizations
Remove special comments (i.e. /*! comment */)
Do not remove the first special comment
Preserve compatibility with IE8

21. webtools.joomboost.com

Web tools have four compression level for your CSS minification, they are –

Highest (no readability, smallest size)
High (moderate readability, smaller sizer)
Standard (balance between readability and size)
Low (higher readability)

22. htmlminifiers.com/css-minifier

Minify CSS with no possible side-effect. It

Removes useless white spaces, indentation characters, and line breaks
Strips all comments
Removes the last semi-colon of a style declaration and extra semi-colons
Removes empty CSS declarations
Removes units when using zero values
Removes the leading 0 if a float value is lower than one

23. cuteseotools

Another simple tool to minify your CSS code.

24. beautifyconverter.com/css-minifier

Option included are – Load CSS file from URL or upload, Beautify CSS, Minify CSS and download the minified version in a file.

Minify Vs Compression

Minifying is great but doesn’t get mix up with compression, these two are not the same. The minified code can be run as it is, Minification means it will only remove whitespaces, comments and other unnecessary characters from the file to create a CSS file that can be run without doing anything. Whereas compressed codes need to de-compressed before it can be run. This is the main difference between these two. Contrary to compressors, Minified files can be run without having to do anything.

Before minifying your codes you should always keep a copy of your files. Minifying is a great way to improve your page load time. We believe this list of free online CSS minifiers will help you to minify your CSS codes. Have you been using any online minifiers I listed ? or any other tools you would like to add to this list? What are the tools for CSS minifying techniques you use? Comment below!