27 Free Online CSS Minifiers To Minify CSS Files

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

  1. 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

hackinguniversity

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

3. freeformatter.com/css-minifier

freeformatter

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

cleancss

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

5. cnvyr.io

cnvyr

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

minifier

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

css-minifier

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

code-beautify

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

minifycode

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

browserling

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

11. countwordsfree.com/css-minify

countwordsfree

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

webtoolkitonline

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

foo123

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. varvy.com/tools/css

varvy

Vary.com’s tool does minify your code but it does not remove the line breaks and there’s no option for it.

15. beautifytools.com/css-minifier

beautify

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.

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

code-maze

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

17. devotter.com/css-minifier

devotter

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.

18. minifycss.io

minifycss

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

19. minifyweb.com/minify-css

minifyweb

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.

20. tutorialspoint.com/online_css_minifier

tutorialspoint

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.

21. howtodoinjava.com/best-online-css-formatter-minifier

howtodoinjava

An online CSS minifer and formatter, 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.
  • It helps to beautify/format your CSS.
  • It helps to minify your CSS.

22. caiapps.com/tools/minifier

caiapps

Another online CSS minifer tool to minify your CSS.

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

online-domain-tools

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

24. webtools.joomboost.com

webtools

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)

25. htmlminifiers.com/css-minifier

htmlminifiers

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

26. cuteseotools

cuteseotools

Another simple tool to minify your CSS code.

27. beautifyconverter.com/css-minifier

beautify

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!

Build your Websites with lightweight & Bloat free themes Without Any coding Knowledge

Browser Themes

One Response to “27 Free Online CSS Minifiers To Minify CSS Files

Leave a Reply

Get Free Resources To Grow Your Business :

- Free Web Resources

- Tips & Insights

- Theme releases

 

Enter your email address

Subscribe!