<html>
<head>
<style>
div, canvas, svg {
width: 200px;
height: 200px;
margin: 10px;
float: left;
}
</style>
</head>
<script>
function runTest() {
var c1 = document.getElementById('c1');
var ctx = c1.getContext('2d');
ctx.scale(2, 1);
var grad = ctx.createLinearGradient(0, 0, 0, 150);
grad.addColorStop(0, "green");
grad.addColorStop(1, "transparent");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 200, 200);
var c2 = document.getElementById('c2');
ctx = c2.getContext('2d');
ctx.scale(2, 1);
grad = ctx.createRadialGradient(75, 75, 0, 75, 75, 125);
grad.addColorStop(0, "green");
grad.addColorStop(1, "transparent");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 200, 200);
}
</script>
<body onload="runTest()">
<div style="background-image: -webkit-linear-gradient(green 0%, transparent 100%);"></div>
<div style="background-image: -webkit-repeating-linear-gradient(green 0%, transparent 5%);"></div>
<div style="background-image: -webkit-radial-gradient(green 0%, transparent 100%);"></div>
<div style="background-image: -webkit-repeating-radial-gradient(green 0%, transparent 5%);"></div>
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="100%" style="stop-color:transparent;stop-opacity:0" />
</linearGradient>
</defs>
<rect width="200" height="200" fill="url(#grad1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="80%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="100%" style="stop-color:transparent;stop-opacity:0" />
</radialGradient>
</defs>
<rect width="200" height="200" fill="url(#grad2)" />
</svg>
</body>
</html>
Codebase Browser
chromium