How to Create Gradients on the Web

Back in the early days of the web, if you wanted a gradient, you had to use an image. You’d pick your colors, then use them to construct a narrow and tall (or wide and short) image and have it repeat in the background a bunch of times. You could build the image in PhotoShop or, if you wanted to save some time, you could find an online gradient creator like the one that used to be here.

Notice I said “used to be.“ While reviewing access logs the other day, I found that some [insert not nice word here, plural] were linking directly to the results image on my domain from their stylesheet. Not cool. I needed to put an end to that.

My first response was to lock down the image by creating a server rule that would keep it from displaying if there were no referrer (or if the referrer wasn’t my domain), but then I did a quick Google search and saw that there were at least a dozen other gradient creators out there.

So, rather than locking down my old PNG gradient creator and adding CSS3 capability to it, I’m going to point you to two of the best gradient creators that I’ve found on other sites:

  1. GradientGenerator.com – You can create pretty much any type of gradient imaginable with this robust generator, and you can export as a PNG or CSS3 code (or both). Bonus: You don’t even need a bookmark because the address is so easy to remember.
  2. CSSmatic Gradient Generator – This one doesn’t have quite as many features as the other, but it’s easier to use. If you’re looking for a basic gradient, I’d suggest starting here.

And, for you do-it-yourself types out there, check out the tutorials put together by CSS-Tricks or Tutorial Republic. They’ll turn you into a gradient wizard in no time.