canvas example

circular bevel

HTML

<canvas id="canvas" width="200" height="200">
    This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

CSS

canvas {
    border: 1px dotted black;
}

JavaScript

var my_canvas = document.getElementById('canvas'),
    ctx = my_canvas.getContext("2d");
    
ctx.fillStyle = "#E0E2E5";
ctx.fillRect(0, 0, 200, 200);
    
// Draw the outer rounded rectangle
var gradient = ctx.createLinearGradient(100, 20, 100, 180);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "#7C878A");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.roundRect(20, 20, 160, 160, 20);
ctx.save();
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(0,0,0, .6)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 10;
ctx.fill();
ctx.restore();

// Draw the blue circle with gradient
gradient = ctx.createLinearGradient(100, 30, 100, 170);
gradient.addColorStop(0, "#CAEBF5");
gradient.addColorStop(1, "#0F5369");
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 70, 0, Math.PI * 2);
ctx.lineWidth = 10;
ctx.stroke();

gradient = ctx.createLinearGradient(100, 50, 100, 150);
gradient.addColorStop(0, "#003C50");
gradient.addColorStop(1, "#53E6FF");
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.lineWidth = 10;
ctx.stroke();