Search code examples
cssbackgroundshadowvignette

Best way of achieving this background vignetting effect?

I want to have a vignetting effect on the background of a page I´m building. This is the page: www.karolinadahl.se

I managed to get the effect I´m looking for in Firefox, and it seems to work ok. In Safari I get some kind of vignetting, though not quite what I´m looking for and the inset shadow slows the page down tremendously for some reason. Im using Safari 5.

I don't think it works in Explorer at all and I don't know about Chrome and Opera.

Is there a smarter way of achieving this effect on the background?

Solution

  • You're applying the effect correctly, however, these effects are

    • Not fully supported, which explains your problem with IE
    • Known to render differently from browser to browser

    Still, time is on your side. Support will only improve. For a web-site still in development, I'd say stick with the CSS3 techniques rather than older, hackier solutions.

    You could also try a gradient in the background. Might be more consistent.