Gradient color creator

Gradcolor is a website that creates in 10 seconds gradients colors pictures for website use by example. If you don't yet have a website then we recommend findind help from WHS - the guide to affordable web hosting

Step 1 : Choose a size for the picture, the mode, and the two (or three,four) colors of the gradient you want make.
Step 2 : Generate it and see the result (the picture and the html and css code).

MODE

Start Repeat Attachment

SIZE

Height

XX px

Width

XX px

COLORS [+] More

GRADIENT EXAMPLE AND OPTIONS

Here are options effect you can produce.

MODE

Start

Gradient will start from Top or Left
From top : just choose a height (SIZE) for gradient.
From left : just choose a width (SIZE) for gradient.

Repeat

Simple : image will repeated vertically or horizontally (depends on start mode : top or left)
Both : image will repeated vertically and horizontally

Attachment : Yes

will add into css style this : background-attachment:fixed; It means that the picture (here the gradient) will be repeated from top or left, but this property will let the picture fixed when you will scroll down the page :
Example 1 : background-attachment fixed

Attachment : No

will not add into css style the fixed property, a blank could or could not (depends on size of text) be visible at the end (if by example your last color gradient is not white and your background color is white)
Example 2 : with no attachment

SIZE

Height

choose the height in pixels for the gradient (works with Start:top)

Width

choose the width in pixels for the gradient (works with Start:left)

COLORS

You got the choice to create a gradient with 2 colors or 3 or 4.

DESIGN

Example of 4 designs made with gradient.Very helpful to start making a web page.

News (july 9th 2010)

We simplify the options with a slider for height(in top mode) and a slider for width (in left mode).
In top mode(picture start from top) you just need to choose height because by default width is 1px.
In left mode(picture start from left) it's the width you need to choose because by default height is 1px.
Why 1 pixel ? because it doesn't need more to generate it, the picture will be repeated.

FAQ

See more info, tips