Gradients Without Photoshop?

Gradients can add depth to your design. Here’s how to create gradient elements in WOO Canvas without Photoshop.

You’d love your header or navigation to just have a bit more than a single color. There’s not even a spot to insert an image for the navigation bar (in Canvas). Yes, the header, we could go into Photoshop, create the gradient image (not all that easy to begin with), upload it to Canvas, repeat the image, hope it’s the right height, and, oh, doesn’t look great. Back to step one in Photoshop. Repeat. Having fun yet?

Enter Ultimate CSS Gradient Generator. Pick your colors with the color picker. You can even have multiple steps in the gradient (not just from color #1 to #2 but from 1 to 2 to 3 to 4). Crazy, I know. Vertical, horizontal, choose a rough guess on width and height, copy the code and … wait. Code? Don’t worry, you don’t have to even get your hands dirty, just copy out the code and then here’s the best part: you can put this code into the field in Canvas where you’d normally have your single color (e.g. #e8e8e8). Paste, save, done, enjoy.

Enjoy your marbled navigation below a smooth sunset*.

Looking to create a CSS gradient without Photoshop? Here’s how.

* Good taste not included.