About
The gradient generator can be used to generate cross-browser compatible gradients. Gradients are implemented using Base64 encoded SVG for Opera, -moz-linear-gradient for Firefox, -webkit-gradient for Chrome & Safari and filters for Internet Explorer.
This is modified Cross-Browser Gradient Generator by Remy Korrelboom with a following changes:
- Fixed bug with SVG background in Opera when an element has solid borders
- Fixed error in entry for IE-filter
- Fixed bug with estimation of #AARRGGBB color format
- Added dropping down colorpikers for changing values in color fields
- The example of gradient being updated just inputs being changed
color fields:
- A color name
- #RRGGBB or #RGB
- #AARRGGBB or #ARGB (A=0 - full transparency, A=F - full opacity)
- rgb(0-255,0-255,0-255) or rgb(0-100%,0-100%,0-100%)
- rgba(0-255,0-255,0-255,0-1) or rgba(0-100%,0-100%,0-100%,0-1)
- hsl(0-360,0-100%,0-100%)
- hsla(0-360,0-100%,0-100%,0-1)
Colors (but not transparency) can be changed with a colorPicker, dropping down, when a color field is in focus. If opacity is not full, color generated by colorPicker will be in format #AARRGGBB
Gradient Generator
URL:
History
CSS
Copy the following CSS to your stylesheet in the order provided below and your gradients should be displayed the same for every major browser.
