HTML5 - Canvas

onload = draw;

function draw() {
var canvas = document.getElementById('canvas');
if (!canvas || ! canvas.getContext) {
return false;
}
var ctx = canvas.getContext('2d');
fillText(ctx, "liner", 25,100);
var g = ctx.createLinearGradient(25,0,175,0);
g.addColorStop(0,"#336699");
g.addColorStop(1,"#ff6600");
ctx.fillStyle = g;
ctx.fillRect(25,125,150,150);

ctx.fillStyle = "#000000";
fillText(ctx, "radial", 225,100);
var g = ctx.createRadialGradient(225,125,10,225,125,150 * Math.sqrt(2));
g.addColorStop(0,"#336699");
g.addColorStop(1,"#ff6600");
ctx.fillStyle = g;
ctx.fillRect(225,125,150,150);
}

function fillText(ctx, str, x, y) {
if (ctx.fillText) {ctx.fillText(str, x, y)}
}