Primary Nav

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.

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

* Good taste not included.

4 Responses to Gradients Without Photoshop?

  1. Tim October 29, 2013 at 9:51 am #

    Hi Bradley,

    I am having trouble getting the css to paste into canvas. ctrl V and right click paste seem to not work. Is there something that you are doing “special”?

    Tim

    • Bradley Charbonneau October 29, 2013 at 7:57 pm #

      No, not doing any special pasting tricks, but I do know that on some browsers sometimes things don’t paste (or copy) as easily as one might hope.

Trackbacks/Pingbacks

  1. Write Every Day Challenge - October 26, 2013

    […] Gradients Without Photoshop? (Oct 25) […]

  2. Sports Site in WOO Themes Canvas - December 11, 2013

    […] Gradient background CSS (see Gradients Without Photoshop) […]

Leave a Reply