CSS gradient generator

This is a CSS-code generator to use the new CSS3 gradient properties, without breaking backward compatibility. Gradients are usefull to reduce the number of images loaded, thus reducing bandwith use.

This is a tryout, therefore the generated code may not work in every case. Feel free to send a comment to report bug, give suggestions or just tell us if it was helpful to you!

Warning: this tool works best under Firefix 3.6+, Safari 4 or Chrome 4. CSS code will be generated with other browsers, but the preview will not work correctly

Direction

Colors

Start color

Add color

End color

Preview

 

Options for legacy browsers

Background color:      

Align:    

Align:    

px

Extended IE/Opera compatibility

Opera  

Internet Explorer  

The extended mode enables oblique gradients for Opera 9.5+ (using SVG background) and activate IE gradient filters. Unsing those filters may result in strange behaviours of your elements (locked form inputs, for instance), so use with caution!

CSS


				

Compatibility

  Internet Explorer Firefox Chrome Safari Opera
Version 5.5 - 8 < 3.6 3.6+ < 4 4 < 4 4 < 9.5 9.5+
Technology filter / streched PNG PNG Gradient PNG Gradient PNG Gradient PNG SVG
Fluid Yes One direction Yes One direction Yes One direction Yes One direction One direction
Alpha Yes Yes Yes Yes Yes Yes Yes Yes Yes
Oblique No No Yes No Yes No Yes No Yes

Credits

Icons: Fugue Icon Set