SVG gradient implementation

Is it possible to recreate this sort of blurred gradient in an SVG?

enter image description here


Yes and no.

It’s possible to create a gradient mesh in Inkscape, and save it out as an SVG. However the SVG standards used in browsers don’t support gradient meshes yet. This might change in the future, but for the present no.

enter image description here

Another method which does work in browsers, is to add several solid objects, blur them, and put them in a clipping mask. This is still a pure vector solution, it’s not rasterized.

enter image description here

Here’s the SVG for the version that works in browsers, if you want it.

Edit: the above link to the SVG is no longer available, so I’ve removed it.

Source : Link , Question Author : Jared Garcia , Answer Author : Billy Kerr

Leave a Comment