Choosing SVG or CSS3 for gradients


I would like to use gradients heavily in a new website I’m working on. I’ve been wondering if it would be better to implement the gradients in CSS3 or SVG.

Typically I only need multi-stop linear gradients so both meet my needs there.

I initially assumed this was best done in CSS3, but started to question my decision and would appreciate other opinions.

My thinking thus far is that SVG (as a CSS background) may be better because:

  • It works in IE9
  • My CSS is cleaner w/o browser prefixes
  • Easy reuse of gradient

CSS3 may be better because:

  • Seems like a job for CSS
  • Less downloads for the client
  • Everything is in one place

An important consideration that I don’t know the answer to is which performs better?

Is there a best practice for implementing background gradients?

Problem courtesy of: C.J.


According to a test performed by Lea Verou (I trust her work), CSS gradients are faster:


You could also consider using modernizr to serve up SVG to IE9 which supports SVG backgrounds but does not support CSS gradients.

In your CSS you would just do:

.cssgradients #someElement { /* Gradient background rule. */ }
.no-cssgradients #someElement { /* SVG background rule. */ }

More info here:

Solution courtesy of: Jim Jeffers

View additional discussion.