40 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 “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 line, 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 a 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 as 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 Yahoo!’s 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. Also has the same options for JavaScript and a image manipulation tool.

 

6. minifier.org

minifier

A minify project of Peter Finlan, MIT-licensed you can minify both CSS and JavaScript also shows the the bytes you saved by minifying you 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 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 CSS prettifier tool.

 

11. countwordsfree.com/css-minify

countwordsfree

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

  • stripping comments and white spaces
  • stripping last semicolon
  • removal of extra semicolons
  • removal of empty declarations
  • optimizing of empty values
  • transforming of 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 lot of options such as – Minify, Beautify, Remove comments, Add vendor prefixes, Apply fallback pollyfills, 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 option for beautification as well.

 

16. ourcodeworld.com/tools/minify-css-online

ourcodeworld

You can either paste your CSS code or upload the CSS file to minify via this website. Although the paste field in not working for quite sometime.

 

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 and gulp-minify-css plugins.

 

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

rudrastyh

A simple CSS minifier. All you need is to copy and paste your CSS into the left box. After that choose the minification type and push the button. That’s all!

You two options to choose from –

  • No readability, all CSS in a single line
  • Each Selector on the different line

You can also download the minified version as a file.

 

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

A 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. tools.bin63.com/css-minifier-unminifier

bin63

A handy online tool to minify as well as unminify your CSS codes. Outputs the data on text box or export to a CSS file. Tested the unminifier also, it works as it should be.

 

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

Webtools has 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.

 

28. minifier.online-gadget.com/minify-css

online-gadgets

Minifies your CSS codes but lacks options other minifiers are already providing. Another solid free online CSS minifer.

 

29. htmlbeautifier.online/css-minifier

htmlbeautifiers

A dedicated htmlbeautifier site also has the option to minify and beautify your CSS codes with options to download your minified CSS code in separate file.

 

30. caiapps.com/tools/minifier

caiapps

Another online CSS minifer tool to minify your CSS.

 

31. knowledgequeue.com/online-css-minifier

knowledgequeue

This site can minify inline styles, you either upload your CSS file or copy-paste  and minify it. Though at the time of writing this article the tool did not work.

 

32. freeseotools.pk/css-minifier

freeseotools

Gives you the ability to upload or paste CSS code and download it in a separate file with online CSS minify version.

 

33. ytilitu.xyz/minifier/css

ytilitu-xyz

Another simple free online CSS minifer tool, you can paste code or upload the file, minify and download it.

 

34. onlineseotools.org/css-minifier

onlineseotools

Options available are pasting your CSS code or uploading the file and download it after you’re done minifying it.

 

35. minify.avivo.si

minify-avivo

Options to minify or deminify your CSS code, no option to download the file. You have to copy the codes.

 

36. freeonlineseo.org/css-minifier

freeonlineseo

Same options as most of the simple minifier. You paste your code and download in a separate file.

 

37. pakfunz.com/p/css-minifier

pakfunz

You can only paste your codes minify it and copy it, no options for separate download. Although does give you more minify options –

  • Strip all comments
  • Super compact
  • Keep indentation
  • Remove the last semicolon

 

38. minifyweb.com/minify-css

minifyweb

This website have one unique feature that none of the others minifiers have. You can combine multiple CSS file into one minified CSS file. You can either paste 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.

 

39. seo.hostlittle.com/css-minifier

seo-hosttile

Minifying options included pasting your CSS code or upload the file and download the minified version.

 

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

code-maze

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

 

Minify Vs Compression

Minifying is great but don’t get mix up with compression, these two are not the same. 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 which 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 CSS minifying techniques you use ? Comment below!

 

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

Browser Themes

Get Free Resources To Grow Your Business :

- Free Web Resources

- Tips & Insights

- Theme releases

 

Enter your email address

Subscribe!