Feb 21
Cross Browser Gradients - Basic Linear Gradient
CSS linear gradients (that run along a line) are supported by the latest versions of all major browsers:- Firefox 3.6+
- Webkit 2+ (Chrome, Safari, Konqueror)
- IE 3+
- Opera 10.5+ (not v10.10)
.linearGradient{
background-image: url('gradient.png');
background-image: linear-gradient(left, red, blue);
background-image: -moz-linear-gradient(left, red, blue);
background-image: -webkit-gradient(linear, left center, right center, from(red), to(blue));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='red', EndColorStr='blue');
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='red', EndColorStr='blue');
}
<div class="linearGradient" style="width:100px; height:100px;"></div>
Line by line, this covers browsers without CSS3 support, Opera / W3C, Firefox, Safari & Chrome, IE 6 & 7, and IE 8.
If JavaScript is disabled, IE will not show the gradient.
II. Understanding the variables:
The CSS defines three items for each gradient: Its style, its direction, and its colors.
Gradient style
Either 'linear' or 'radial'. For FF/W3C this is part of the variable name (-moz-linear-gradient), for Webkit this is the first argument ( -webkit-gradient(linear,...)) and for IE this is skipped. IE does not need this argument as radial gradients are not supported.
Gradient Direction:
In IE the direction is either type 0 (vertical) or type 1 (horizontal).
The type is set as an attribute of the filter: ....GradientType=0.... (top->bottom).
In Webkit, the direction is specified as the 2rd & 3rd argument:
- A start and end point must be specified, each consisting of a pair of space-separated values.
- -webkit-gradient(linear, left center, right center, ...
- These values can be in pixels, percentages, or the keywords top, bottom, left and right (origin is the top left corner).
- -webkit-gradient(linear, left center, right center, ...
-webkit-gradient(linear, 0px 50%, 100% 50%...
- -webkit-gradient(linear, left center, right center, ...
3C / FF / Opera add the following to the Webkit implementation:
- End position is not required (it can be specified using 'stops').
- linear-gradient(left, ...
instead of -webkit-gradient(linear, left center, right center)
- linear-gradient(left, ...
- The second [space separated] value is not required, defaults to 'center'.
- linear-gradient(left, ...
instead of -webkit-gradient(linear, left center, ...
- linear-gradient(left, ...
- Gradient can be described as an angle (in degrees)
- linear-gradient(45deg,...
- Keyword 'center' will have gradient begin in center of element:
- linear gradient(center,...
Gradient Colors
IE accepts 'start' and 'end' colors in keyword or hexidecimel (rgb/argb - see later) form:
Red can be written as:
- red
- #FF0000
- #FFFF0000
The colors are attributes of the filter:
..Microsoft.Gradient(StartColorStr='red', EndColorStr='blue'...
According to the docs, the final 'Str' in the attribute name is only required when a hex argb value is passed. In practice, testing shows that this is the format that should be used always.
Webkit and FF both accept a 'from' and 'to' color as the last two arguments of the style.
Input of these colors are no different than all other colors used by the browser.
For example, red can be written as:
- red
- rgb(255,0,0)
- rgba(255,0,0,1)
- FF: hsl(0,100,100) / Webkit: hsl(0,100%,50%)
- #F00
- #FF0000
Webkit requires the start color to be passed as an argument to 'from'.
- Webkit: -webkit-gradient(linear, left center, right center, from(red), to(blue));
- FF: -moz-linear-gradient(left, red, blue);
As you can see, the FF / W3C implementation is shorter, simpler and more powerful. Lets hope Webkit comes on board soon.
(I normally use Firefox, but am writing this using Chrome. It's appalling, though better than IE.)
III. Gradient from opaque to transparent:All browsers support a opaque to transparent gradient, through an "alpha channel" - a way to represent the transparency of any color.
In FF/Webkit, the alpha channel is a number between 0 and 1, and is after the other colors as rgba or hsla.
Three ways to signify transparency:
- rgba(0, 0, 0, 0)
- hsla(0, 0, 0, 0)
- transparent
In IE the alpha channel is listed first, and ranges from #00 to #FF.
#00000000 - transparent
The following is the same gradient as above, but from transparent to blue.
.linearGradient{
background-image: url('gradient.png');
background-image: linear-gradient(left, rgb(0,0,0,0), blue);
background-image: -moz-linear-gradient(left, hsl(0,0,0,0), blue);
background-image: -webkit-gradient(linear, left center, right center, from(transparent), to(blue));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00000000', EndColorStr='blue');
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#00000000', EndColorStr='blue');
}
Comments (3)
Feb 21, 2010
siteroller said...
Posterous is a great blogging tool, but its not meant for those who are trying to teach code. This post was greatly mangled. I may have to host it elsewhere.
Feb 27, 2010
Joyce said...
This is very helpful. As a graphic designer, it's always scary when colors don't show up as I expect them to in different browsers.
