How to Obtain the ColorZilla Plugin for CSS3 - dummies

How to Obtain the ColorZilla Plugin for CSS3

By John Paul Mueller

In order to use most ColorZilla features with CSS3, you must install the plugin. (The Ultimate Gradient Generator doesn’t require the plugin.) The plugins described here are version 2.8 for Firefox and version 0.5 for Chrome.

If you use a newer or different version of the plugin (say, for another browser), you may see some differences in the appearance of the screenshots. A little variation is normal and you shouldn’t worry about it. Use the following procedure to install the plugin.

  1. Go to the ColorZilla site.

    You see the ColorZilla main page.


  2. Click ColorZilla for Firefox and Chrome.

    You see options for selecting the browser type. Even though the example shows the Firefox page, the options for working with Chrome are the same.


  3. Click Firefox if you use the Firefox browser or Chrome if you use the Chrome browser.

    The installation button that appears below the browser buttons changes to match the browser you selected.

  4. Click Install ColorZilla 2.8 if you use the Firefox browser or Install ColorZilla 0.5 if you use the Chrome browser.

    You see a dialog box for Firefox that asks your permission to install the plugin. It may also tell you what the plugin will do. If you don’t see the dialog box, your browser may be asking for permission to display it.


  5. Click Install Now (or Add if you’re using Chrome).

    The installation will proceed. Firefox users may have to restart the browser (a dialog box will tell you whether this step is necessary) After a few seconds, you see a ColorZilla Installed page that describes all the features of the plugin in a little more detail.


For more on the additional functionality of The ColorZilla plugin review the full list of features at For example, you can use ColorZilla to display element information such as the tag name, class, ID, size, and relative mouse-pointer position so you know how a particular page is put together. It’s also possible to use ColorZilla to launch Firebug when you need to debug the page setup.

After you get the plugin installed, you see a new eyedropper icon in the toolbar of your browser. Next to this eyedropper is a drop-down list (menu) of ColorZilla features you can use.