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/

Purposive

Answer 1

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>

Urine

Well, i've tried that. Look at the result: jsfiddle.net/vvXgb. It's closer to the original, but still not quite as it should be. – Purposive

play around with the r attribute in your radialGradient tag until you get a satisfactory result, check updated code. – Urine

Modern browsers support SVG background by the way, so there's no need for CSS3 fallback if you encode with base64. – Urine

Nice, setting radius to 1 gives the wanted result. Thanks! – Purposive

@methodofaction, is there a way to create gradient for an svg without using radialGradient tag? – Equator

@Equator yes use linearGradient developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient – Urine

@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 cssbackground: .... but it does not work for the path. – Equator