CSS3 gradients as SVG

Question

On my page i'm using a lot of CSS3 gradients. I would like to provide some SVG fallback for IE and Opera.

Creating SVG fallbacks for CSS3 linear-gradient is pretty easy. I use the following code:

   <svg xmlns="http://www.w3.org/2000/svg">
     <linearGradient id="g" gradientTransform="rotate(90,.5,.5)">
       <stop stop-color="black" offset="0"/>
       <stop stop-color="white" offset="1"/>
     </linearGradient>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
   </svg>

Which is equivalent to this css:

  background:-webkit-linear-gradient(black,white);
  background:   -moz-linear-gradient(black,white);
  background:     -o-linear-gradient(black,white);
  background:        linear-gradient(black,white);

Now when it comes to CSS3 radial-gradients, things are getting little more complicated. I'm having no luck creating the SVG equivalent for a CSS3 radial-gradient like the following:

  background:-webkit-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:   -moz-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:     -o-radial-gradient(50% 10%,circle,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);
  background:        radial-gradient(circle at 50% 10%,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 90%);

So far i've managed to come up with this:

<svg xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="g">
    <stop stop-opacity=".3" stop-color="white" offset=".1"/>
    <stop stop-opacity="0" stop-color="white" offset=".9"/>
  </radialGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</svg>

But it gives me different results.

How could i produce the same gradient as the original one in CSS3?

Here's a demo of two gradients: http://jsfiddle.net/QuMnA/

methodofaction · Accepted Answer · 2012-09-06T19:42:11.533

4

You need to specify the cx and cy attributes of you radial gradient...

<svg xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="g" r="1" cx="50%" cy="10%">
    <stop stop-opacity=".3" stop-color="white" offset=".1"/>
    <stop stop-opacity="0" stop-color="white" offset=".9"/>
  </radialGradient>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</svg>

edited Sep 06 '12 at 19:42

answered Sep 06 '12 at 18:02

methodofaction

70,885
21
151
164

Well, i've tried that. Look at the result: http://jsfiddle.net/vvXgb/. It's closer to the original, but still not quite as it should be. – Kuwiuwuw Kurwiow Sep 06 '12 at 18:51
play around with the `r` attribute in your radialGradient tag until you get a satisfactory result, check updated code. – methodofaction Sep 06 '12 at 19:43
Modern browsers support SVG background by the way, so there's no need for CSS3 fallback if you encode with base64. – methodofaction Sep 06 '12 at 19:45
Nice, setting radius to 1 gives the wanted result. Thanks! – Kuwiuwuw Kurwiow Sep 06 '12 at 20:12
@methodofaction, is there a way to create gradient for an svg without using `radialGradient ` tag? – Asking Oct 03 '22 at 17:18
@Asking yes use `linearGradient` https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient – methodofaction Oct 03 '22 at 21:29
@methodofaction, sorry i meant `linearGradient`. I ask this because i have issue with `id attribute value must be unique` issue when my react component that contains an svg is used more than one time on the page. I investigated many articles but i did not find a solution. Do you know how to avoid this? I wanted maybe to add gradient but using css`background: ....` but it does not work for the path. – Asking Oct 04 '22 at 06:52

CSS3 gradients as SVG

1 Answers1