Question

I’ve been designing website for a long time just using images for gradients, for small gradients this seems to work fine and not add much loading time, but right now with so much fragmentation with newer CSS (webkit/moz/o/khtml, and not to mention ie 6,7,8,9)

so in order for just one universal gradient theres gonna be a lot of css.

With sites that are going to require a ton of gradients I use Less.js to make it slightly better, but this only goes so far…

I was just wondering at what size does it make more sense to use css gradients over images, if there really is a breaking point.

[ex. a small 5px gradient, it makes more sense to just have a 5px image, but like a 1000px gradient it probably makes more sense to just use css]

Oh and I know there’s SVG, I haven’t really tried it but does it work well?

Any opinions would be much appreciated. 🙂

Answer 1

The problem with using images is that you are much more restricted in what you can do. If you want to use a background gradient and the box is larger than you anticipated, either the gradient stops early or it starts repeating. Both solutions are probably not what you want.

You could check http://www.css3please.com for examples on how to get the nice effects in css3 (with live sample code). For background gradients you can use the following:

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}