Question

I trying to create a basic simple dynamic mask using gradient tools but it’s not working correctly. Note i’m using Google Chrome.

If you drag the mouse from one location to another, the circle shape and blur changes which is strange.

http://jsfiddle.net/mrdSs/101/

How can I possibly fix this?

Answer 1

http://jsfiddle.net/5J8D6/4/

Don’t use circle closest-side instead try 50px 50px. We needed to set an explicit shape and size

var t = "background-image: -webkit-radial-gradient("+e.pageX+"px "+e.pageY+"px, 50px 50px,  rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100px)";

See http://www.impressivewebs.com/css3-radial-gradient-syntax/