CSS Gradient Generator

I love gradients. Easy enough to do in Photoshop and you get a big bang for your (designer) buck. Looks nice, easy to use, done. But you’re dealing with images. Always better to deal with pure CSS if you can, of course. With CSS, it’s:

  1. Easier to update.
  2. Faster to load.
  3. No more Photoshop.
  4. Easier to resize/fit-to-shape.
  5. Cool.

Took all of eleven seconds (I had to get my cup of tea, that was probably the delay) to find theĀ Ultimate CSS Gradient Generator. You insert your two HEX color codes, copy the code over to your CSS document, sit back and enjoy that cup of tea.

You knew it was possible, you just needed to take it to that tiny extra step to make it happen. You needed to search for it, test it, then document it. Now it’s yours. Now it’s here. I love when things just work out.


About the Author:

I've done the big corporate thing. I've done the creative writer thing. Now I'm happily in the middle. I like to help small businesses who are interested in "working their website before their website works them." I'm also interested in creating beautiful sites with powerful WordPress themes. Google+


  1. tim February 22, 2013 at 8:51 am - Reply

    wow! that is nice! graphic designer are going love this.

  2. Dan Barahona March 3, 2013 at 9:54 am - Reply

    Awesome tip. So all I need to do is copy the CSS code to my style.css file? If I’m already using a theme will this conflict with any existing background style or just overwrite it?

    • Bradley Charbonneau March 5, 2013 at 4:49 am - Reply

      Into style.css or better yet, into custom.css if your theme has it (it loads later and takes priority).

    • Tim Johnson March 5, 2013 at 4:50 am - Reply

      Since it is CSS it should only conflict if the same rule exist in you style sheet.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

Share This