Creating Gradient Images without Photoshop

Tuesday, Nov. 22 2005 | Author: AlexTan

I’m a web developer, and have a sort of “Photoshop-phobia”. I’m great at coding with CSS/XHTML, but I can’t stand going into Photoshop or another photo editor to create background images for my sites. After a while, I realized that there isn’t much you can do with a bunch of one-color boxes. But, there is a solution: Gradients. Gradients get rid of that boring, one coloredness in your web pages, and instead have a transition from one color to another. The greatest part is that there is a way to create them without any apps. The interface looks like this:

gradient

Share and Enjoy

Adobe Photoshop within a 3-Dimensional Space
Photoshop gets a brand logo
ars reviews Photoshop CS3
Photoshop Online announced
Adobe Photoshop CS3

Hope you like that post!

Forever Geek is a resource for all things geek. You can stay tuned by having the latest FG news delivered to you for free via RSS.

Category: Uncategorized
Tags:

8 Responses for "Creating Gradient Images without Photoshop"

Kent

November 22nd, 2005 at 5:20 am
1

So, when is an app not an app?

Is a web app not an app?

It would take you 10 minutes to learn most of what can be done with the Photoshop gradient tools, and that would give you about 100x the power of this web app, as good as it is…
kameowy

November 22nd, 2005 at 6:42 am
2

u should try -moz-border-colors… work only @mozilla products but looks nice (if u need gradient at border;)
Riddle

November 22nd, 2005 at 7:20 am
3

@Alex: I don’t see the point in not-using-the-evil-photoshop. I’m webdevloper also and I can’t stand webdesigning without it.
Alex Tan

November 22nd, 2005 at 7:35 am
4

Kent, do we really need to analyze every word here? kameowy, thanks for the tip, and riddle I dont think photoshop is evil ok, it’s a powerful tool. Personally, I prefer sticking to coding as much as possible. That’s all I was saying.
cliche

November 22nd, 2005 at 9:36 am
5

For background gradients, it’s common practice to get a 1px wide (or tall) sample and
background-repeat: repeat-x (or y)
to reduce bloat. For patterns like the one on the title bar here, a small block of sample is taken and repeated. This would be a more useful tool if it gave you the sample instead of the whole image.

(I haven’t made a web page in years, but I think they still do it like this)
Steve

November 22nd, 2005 at 11:28 am
6

Something I was playing around with the other week:
http://slayeroffice.com/code/gradient/

Cross-browser, no images. Just define the gradient colors as part of the class attribute. Could probably do with some refining, and requires the element to be positioned for it to work, but its pretty quick.
umabdullah

May 10th, 2006 at 10:42 am
7

Great! goodluck
Darkflame

June 1st, 2006 at 7:50 am
8

Anything that avoids massive background pictures is good, imo