Градиент для Opera 9.5+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Градиент (только для Opera 9.5+)</title>
</head>
<body>
<style type="text/css">
.colorPicker {
height: 20px;
width: 300px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KDQoJPGRlZnM+DQoJCTxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj4NCg0KCQkJPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDI1NSwwLDApO3N0b3Atb3BhY2l0eToxIi8+DQoJCQk8c3RvcCBvZmZzZXQ9IjIwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDI1NSwyNTUsMCk7c3RvcC1vcGFjaXR5OjEiLz4NCg0KCQkJPHN0b3Agb2Zmc2V0PSIyMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYigyNTUsMjU1LDApO3N0b3Atb3BhY2l0eToxIi8+DQoJCQk8c3RvcCBvZmZzZXQ9IjQwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDAsMjU1LDI1NSk7c3RvcC1vcGFjaXR5OjEiLz4NCg0KCQkJPHN0b3Agb2Zmc2V0PSI0MCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYigwLDI1NSwyNTUpO3N0b3Atb3BhY2l0eToxIi8+DQoJCQk8c3RvcCBvZmZzZXQ9IjYwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDAsMCwyNTUpO3N0b3Atb3BhY2l0eToxIi8+DQoNCgkJCTxzdG9wIG9mZnNldD0iNjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2IoMCwwLDI1NSk7c3RvcC1vcGFjaXR5OjEiLz4NCgkJCTxzdG9wIG9mZnNldD0iODAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2IoMjU1LDAsMjU1KTtzdG9wLW9wYWNpdHk6MSIvPg0KDQoJCQk8c3RvcCBvZmZzZXQ9IjgwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDI1NSwwLDI1NSk7c3RvcC1vcGFjaXR5OjEiLz4NCgkJCTxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDI1NSwwLDApO3N0b3Atb3BhY2l0eToxIi8+DQoNCgkJPC9saW5lYXJHcmFkaWVudD4NCgk8L2RlZnM+DQoJPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6dXJsKCNncmFkaWVudCk7Ii8+DQoNCjwvc3ZnPg0KDQo=) no-repeat;
}
</style>
<div class="colorPicker"></div>
</body>
</html>
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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="20%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="20%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="40%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>
<stop offset="40%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>
<stop offset="60%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="60%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="80%" style="stop-color:rgb(255,0,255);stop-opacity:1"/>
<stop offset="80%" style="stop-color:rgb(255,0,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" style="fill:url(#gradient);"/>
</svg>
Возможно SVG-файл можно сократить.
DataURLMaker (надо только не забыть image/svg+xml в CSS подставить и внутри <style type="opera/css"> не будет работать)