gradcolor       gradient generator image       css3 gradient generator

Gradient Generator

Gradcolor generates in 10 seconds gradients colors images or css3 gradient code for website use by example.

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).

GRADIENT MODE
Gradient starts from        Repeat Effect        Background Attachment
IMAGE SIZE
Height
XX px
Width
XX px
GRADIENT COLORS [+] More
1    2        
Generate gradient image

GRADIENT GENERATOR EXAMPLE AND OPTIONS

Here are options effect you can produce.
gradient example

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.

INFO
If you prefer using only css(without images) to create gradient maybe you could like the : css3 gradient generator

NEWS
Saving gradient to account has been disabled, but will be back soon.


FAQ
The gradient presentation size = 750*200px and real generated gradient size =1*height px or width*1px that has been repeated.(width * height px)
See more info, tips

© 2014 - Gradcolor.com - V2.3 - Contact - Privacy - Css3 rounded corner