The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Multiple Backgrounds: SVG pattern fade + CSS3 Gradient Reply To: Multiple Backgrounds: SVG pattern fade + CSS3 Gradient


I found this page on SVG masking and gradients and got excited:

Current issues, though:

  • The examples in this article use simple SVG objects like rectangles and circles for their masks. I’m not sure how to turn my leaf into a useable SVG mask.
  • Just looking back at my files, even the leaf pattern SVG is 246 KB. Maybe it isn’t worthwhile to try to do this.

Sure, using an SVG pattern+gradient will result in a nicer-looking end result (will go edge-to-edge rather than the hard edge I’ll get from my PNG). But I don’t want to tax my users’ bandwidth.

I haven’t really considered what this will look like in mobile, but I expect to eschew the gradient/pattern altogether.

Opinions still appreciated,