ColorZilla Ultimate CSS Gradient Generator

We don’t need no stinking .jpg background gradient. Now that CSS3 is being widely accepted by most browsers the need for slow loading images for rounded corners, drop shadows and gradient backgrounds no longer exists.

You can spend hours designing and testing various gradient backgrounds. Once you get started you will find many places you can use these. No longer do you have to create a graphic image, call it in the css for the background and be limited on the height of the area based on the height of the graphic.

Gradient Backgrounds for Tabs & Call To Action Buttons

I like using this tool to create gradient backgrounds for navigation tabs and call to action buttons.

It is easy to pick colors using the ColorZilla eye dropper tool for Firefox. Then with the gradient tool you can create a nice gradient background that fits right into your theme’s color scheme.

Once you have the gradient effect you want, copy the code and paste it in your theme’s style.css file.

Over in the sidebar is a widget with call to action buttons generated using this tool. There are no graphic files involved in the gradient or the drop shadow. Everything you see is pure CSS.

The navigation tabs and the sidebar title areas are also using gradient backgrounds generated by this tool.

Even if you never use it in a theme, you will learn a lot about gradients and have some really geeky fun creating different types and styles of gradients.

Geeky Thanksgiving with ColorZilla’s Ultimate CSS Gradient Generator

So this Thanksgiving when all the rest of the world is watching Football and you need something geeky to occupy your time, take this tool for a spin.

Comments

Thanks for sharing Dave. I had never seen this tool before and it’s now in my bookmarks. I actually need backgrounds on several of my sites and was about to make some images to use. I think I will be giving this a try instead.