Gradients Without Images

This is an example of a gradient created without using an image. It works in all modern browsers such as Firefox 2, Opera 9, Safari 3, and also in Internet Explorer 6 and 7.


HTML for Above Effect

<div style="position:relative;width:850px;color:#fff;">
<div style="position:absolute;top:0;left:0">
<!--[if !IE]>-->
<object data="inc/hdr.svg" type="image/svg+xml" width="850" height="150">
<div style="width:850px;height:150px;background-color:#3366cc;">
</div></object>
<!--<![endif]-->
<!--[if IE]>
<div style="width:850px;height:150px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,
  StartColorStr='#003399',EndColorStr='#6699ff');"></div>
<![endif]-->
</div>
<div style="position:absolute;top:0;left:0">
<h1>Gradients Without Images</h1>
<p>This is an example of a gradient created without using an image.
It works in all modern browsers such as Firefox 2, Opera 9, Safari 3,
and also in Internet Explorer 6 and 7.</p>
</div></div>

Content of hdr.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 17 3" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blue" x2="100%">
<stop offset="0%" stop-color="rgb(0,49,156)"/>
<stop offset="100%" stop-color="rgb(102,153,255)"/>
</linearGradient>
</defs>
<rect width="17" height="3" fill="url(#blue)"/>
</svg>