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).
|Here are options effect you can produce.|
StartGradient will start from Top or Left
From top : just choose a height (SIZE) for gradient.
From left : just choose a width (SIZE) for gradient.
RepeatSimple : image will repeated vertically or horizontally (depends on start mode : top or left)
Both : image will repeated vertically and horizontally
Attachment : Yeswill 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 : Nowill 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
Heightchoose the height in pixels for the gradient (works with Start:top)
Widthchoose the width in pixels for the gradient (works with Start:left)
COLORSYou got the choice to create a gradient with 2 colors or 3 or 4.
DESIGNExample of 4 designs made with gradient.Very helpful to start making a web page.
INFOIf you prefer using only css(without images) to create gradient maybe you could like the : css3 gradient generator
NEWSSaving gradient to account has been disabled, but will be back soon.
FAQThe 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