Big blocks with CSS3 gradients

Question

Is any way to implement good performance big blocks with CSS3 radial gradients? Like on this website. http://www.medora.ca/wp-content/themes/medora/images/bgNoise4.jpg (3200x1600)

Canvas - blocks JS during image generation and create a timeout.

CSS3 - FF 13 was too overloaded with big gradient (3200x1600), when that gradiend was added, even simple CSS3 transition for a tags was very slowly.

SVG - too low experience, don't tested too much, image was lower quality then CSS3

VML - for IE, have no experience

I mentioned that for Chrome adding such big block with radial CSS3 gradient, had good performance.

Do you know any disering technology for CSS3 or canvas, to make radial gradient without visible radial lines?

I will appreciate if you can provide some example links.

Thank you!

Answer 1

This is what I came up with. Haven't tried it on a massive block yet but in this one, I see no visible radial lines:

HTML:

<div id="gradient_div"></div>

CSS:

#gradient_div {
  margin: 0 auto;
  border-radius: 20px;
  width: 500px;
  height: 500px;    
  background-color:rgba(171, 171, 171, 0.1);
  background-image: -moz-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -webkit-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -o-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: -ms-radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
  background-image: radial-gradient(50% 0%, circle cover, rgba(171, 171, 171, 0.3), #242bff 50%);
}

Here is a JSFiddle version you can mess around with: http://jsfiddle.net/Hz8ME/