I am wanting to create a drop shadow for an object (or anything for that matter) with Raphael. I was searching around the web and found some sources, but was unclear as to how I would apply it to my code. From what I understand there is a blur() method in Raphael but I didn’t find it in their documentation. Anyways I am new to Raphael so if someone could provide some assistance I would appreciate it. Here is the code I have so far…
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
</head>
<body>
<div id="draw-here-raphael" style="height: 200px; width: 400px;">
</div>
<script type="text/javascript">
//all your javascript goes here
var r = new Raphael("draw-here-raphael"),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"});
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
</script>
</body>
</html>
you need to use glow. here’s an example