Updated the example. Looks like the hard edges are due to lack of anti aliasing on the clamp result. I don't know how to fix this directly, but visually speaking it is significantly less noticeable with larger resolutions/shapes, as well as faster motions. On a high dpi display such as most modern mobile devices, it should be negligible.
I wish there were more parameters in the webgl blur effects. Adding a low radius horizontal and vertical blur to the entire layer could be a possible solution, but the current blur effects don't really allow for fine control.
The result also does seems to be better with a proper gaussian blur from an image editing program rather than just using the brush from Construct's image editor, but it's pretty hard to see.
Also generally speaking as far as design goes, these are the types of things users are not likely to notice or care about as long as your gameplay is engaging enough.
Edit: Also tried adding the coloring via blend modes, but for some reason it doesn't preview in the editor correctly. It works fine in the project preview though. You can try it by changing the blend mode of Layer 1 to 'Destination In' or 'Destination Atop'