Add gradient fill in svg as background url css

Asked Nov 25 '20 at 01:32

Active Nov 25 '20 at 01:32

Viewed 16 times

I have a circle svg called in css as background url.And now I wanted to add gradient color on it. I tried to add gradient codes but unfortunately its not really working but when I removed the gradiant codes it works but I need the gradient color :(.

What I done so far is :

 .a {
    background: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='xMinYMin meet'> <linearGradient x1='0' y1='0' x2='100%' y2='100%' id='gradient'><stop stop-color='#c86dd7' offset='0'/><stop stop-color='#3023ae' offset='100%'/></linearGradient><circle fill='url(#gradient)' cx='250' cy='250' r='240'/></svg>");
 }

https://jsfiddle.net/zgjhms17/2/

Any help is much appreciated. Thank you

asked Nov 25 '20 at 01:32

Sanv Ariana

you need to encode your # character – Temani Afif Nov 25 '20 at 01:53
I already did. But its not working. What I want is gradient color not just hex. – Sanv Ariana Nov 25 '20 at 01:57
you did not, you have 3 # in your code – Temani Afif Nov 25 '20 at 01:58
oh sorry I converted it. and its now working,. Thank you – Sanv Ariana Nov 25 '20 at 02:01
This helped me. Thanks @SanvAriana for making the fiddle. – Mattis Jan 11 '21 at 15:47

Add gradient fill in svg as background url css

0 Answers0