gradcolor              css3 gradient generator

Css3 Gradient Generator


GRADIENT MODE
Gradient start position             Gradient effect
GRADIENT SIZE
Width
XX  px
Height
XX  px
GRADIENT COLORS [+ more]
1
XX  %
2
XX  %

CSS3 gradient generator FAQ

This tool is easy to use and get various gradients results (size,colors,positions...)
You get the html and css code to put on your webpage (on your stylesheet).
CSS3 is very useful to create nice area with gradient, it doesn't use pictures, just css (Cascading Style Sheets).

Actually not all browers support css3 gradient but some of recent browser support it :
(Firefox,Chrome,Safari,Opera 11.10...)
Internet explorer (from version 5.5 to version 9) will use this css to display gradient :
filter:progid:DXImageTransform.Microsoft.gradient(.....);(IE5.5 to IE9)
That you could see into the css code when you generate a gradient.It uses a start color and end color that is respectively the #1 color and the #2 color (selected).
So if you want to create a gradient with more than 2 colors, (2 colors will be visible on IE) and the others will be visible only on the browser that support css3 gradient code like :
background-image:-moz-linear-gradient(...);(Firefox 3.6+)
background-image:linear-gradient(...);(W3C)
background-image:-webkit-linear-gradient(...);(Chrome10+,Safari5.1+)
background-image:-o-linear-gradient(...);(Opera 11.10+)
background-image:-ms-linear-gradient(...);(IE10)
background-image:-webkit-gradient(...};(Safari 4+,Chrome 2+)
By default a background-color is added for browser that don't support css3 gradient and filter:progid:....
For IE, two gradients orientation are possible : GradientType=0 (vertical) ou GradientType=1 (horizontal) respectively automatically put into generated css code .

Gradient tested with:(IE,Firefox,Safari,Chrome,Opera 11.10). Should work with other browsers but haven't been tested yet.

More options will be online soon.

© 2014 - Gradcolor.com - V2.3 - Contact