While working on a web project, you need to code a lot. Using some assistive tools, you can minimize some of your efforts and decrease the development time. Today we will get introduced to some free apps and tools that will help you a lot in dealing with CSS.


1. Live CSS Editor

  • A browser extension for Chrome and Safari.
  • It lets you write CSS rules and see the results live on any web page.
  • You can resize the editor and re-position the input box to see the output conveniently.



2. PX-EM

  • An online tool that works out the measurement of px to em. 
  • You just need to input the parent and required px sizes. It will calculate the em size for you.
  • The tool author has another web app, called RQRWD (Really Quick Responsive Web Design Tool) that allows you to measure an element’s width in % from px.



3. Flat UI Color Picker

  • A growing collection of prebuilt color samples that you can best use in your flat UI designs.
  • It provides the color name, hexadecimal code and RGB color code.
  • You can sort these colored tiles by names or date of addition.



4. PatternBolt

  • A tailored collection of some SVG pattern backgrounds usable on your web project.
  • Clicking the sample backgrounds opens the respective pattern.
  • You can also use them as an image overlay. Downloadable as a single CSS or SCSS file.



5. CSS Animation Generator

  • Pick and generate an animation from 60+ predefined ones.
  • Determine the animation duration. Limited of looping?
  • Get the HTML and CSS codes to apply the animation on your website.



6. Procssor

  • A CSS formatter tool offered by popular CDN provider MaxCDN.
  • It can clean and organize your CSS codes. Several adjustment options available.
  • You can paste the CSS codes, upload a file or even link via a URL. The output can be downloaded or copied to clipboard.



7. CSS Compressor

  • This tool can compress your CSS codes and lower the size to make the site load faster.
  • There are 4 levels of compression. You can choose how much will you compress the codes.
  • Supports CSS 1, CSS 2, CSS 2.1 and CSS 3. Advanced options available for power users.


Bonus: One of our readers has suggested Clippy, a CSS clip-path maker. The tool has 20+ built-in shapes and several demo backgrounds to play with. 


Hopefully the above tools will be helpful in your day-to-day web development activities. Some of the tools may have free trials and pro packages with more facilities. Try them if worthy.