How to make a vignette effect in HTML?

Question

I'm looking for a good solution on how to make a vignette effect for a website. The corners should be darker than the background color of the page like a radial gradient.

So far I tried different approaches:

• 4 DIVs set to position:absolute, top/bottom:0px,left/right:0px with one image in each of them (images block links. Bad idea in general?)
• Same as above but with fixed heights/widths for the divs and an background image instead of an image (still blocking links?!)
• CSS3 multiple backgrounds. Two on the body for top left/right and an extra div on the bottom with height:300;margin-top:-300px to always be displayed on the bottom (bad browser support)
• CSS3 radial gradient on body (as soon as you scroll you loose the background. An extra div could fix this. Also bad browser support again)

About browser support: The solution must work in the newest version of firefox, chrome, IE and if possible opera and safari (ordered by importance). That's the absolute minimum. But it should really work in older browsers too. Firefox 3.6 and IE 8 or even 7 if possible. I don't know much about chromes version history, but it seems that chrome users are almost all up to date, so it's no big problem to drop support for chrome 15 and lower?! Are there even any significant changes that would make something work in chrome 17, but not for example 15?

The CSS3 radial gradient is in my opinion the best looking solution, but I'm afraid that a lot of users wouldn't support it, because of their old browsers. And with the 4 DIV solution I have problems with links that can't be clicked, because of the image blocking it. I tried messing around with the z-index, but that doesn't work. I gave the DIVs z-index:1 and the #container (where all content is placed) an z-index of 10. Shouldn't that work? Does z-index even influence links?

So what do you guys think, would be a good solution? I clearly need some help here. Thanks!

Solution 1

You could use an inner box-shadow

 box-shadow: inset 0 0 100px #000;

demo: http://jsfiddle.net/ACPUP/

But it doesn't work in IE7/8. Older versions of Firefox, Chrome, Safari or Opera might need their prefix: -webkit-box-shadow, -moz-box-shadow or -o-box-shadow.

You can also stack these shadows for a more dramatic effect, but I don't know if older versions of browsers support that.

box-shadow: inset 0 0 120px #000, inset 0 0 80px #000, inset 0 0 40px #000;

Solution 2

Using CSS!

Slight variation on Willem's answer, as recommended by JohnK who hat tipped Chris Coyier:

box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.4);

JSFiddle: http://jsfiddle.net/charlesgoodwin/wKQ2y/

It works very well!

Solution 3

I've used this technique explained in this blog earlier and it works really well. Not sure about support for old browsers though.

Solution 4

depending on what you want, something like this might work;

<style>

height: 100%;
width: 100%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(63%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */

background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */

background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */

background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* IE10+ */

background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */


}
</style>

Works on my browser, should work on all browsers. It's untidy, sure, but allows you to set this to HTML, then you can have body, for example, with the colour or image that you want.

See it in action hereee. http://jsfiddle.net/joshuamartin/taN2Z/4/

http://www.colorzilla.com/gradient-editor/

View more solutions

Comments

[DiLer]

I've already seen this. That's what I tried at first, but he has the same problem, that the content of the page get's blocked by the effect. So links won't be clickable, etc. "The trick with this technique is using just the right amount of height/width. Too much, and the content will become unselectable on account of the divs having a high z-index value." And he is using CSS3 with almost no fallback. I made it almost the same but used pictures instead of CSS3 code. But thanks for your post though :)

[DiLer]

I've used something like this for my CSS3 gradient try. It was in fact the same page (colorzilla). I tried a little more and it looks good now in firefox,chrome,opera and even IE9. But there is no way to change the IE filter? When you change the sliders at colorzilla the IE filter stays the same. I would like to make the edges a little bit darker. I removed the IE gradient, so it's just the backgroundcolor + darker edges in IE9. And of course no support for older browsers :/ But thanks for the reply.

[DiLer]

How good is that compared to the CSS3 radial gradient method? Is box-shadow better supported? It looks like it has better IE9 support, doesn't it? Should I prefer one method over the other? Thanks :)

[Willem]

css gradients need different syntax for each browser and is supported in less browsers(/versions). IE9 does not support radial gradients, but IE10 will.

[DiLer]

I used the SVG filter stuff from colorzilla for IE9. Not the best, but it works. I think your approach is better though. Going to try it out later, thanks :)

[DiLer]

After testing around, I have to add, that this method (box-shadow inset with high blur) is quite performance heavy. I tested it in IE,firefox,chrome and opera. All had some kind of performance issue, if you go higher than let's say 150px blur. It's very noticable while scrolling.

[JohnK]

Instead of inset 0 0 100px #000 (= black), use inset 0 0 85px rgba(0, 0, 0, 0.4). It looks much better. (h/t Chris Coyier)

[mkhatib]

@DiLer is correct on the performance. Watch out as it will affect scrolling performance and animations on your site. See AirBnB post about box-shadow for more detailed analysis. Apparently the culprit is the large blurring radius. nerds.airbnb.com/box-shadows-are-expensive-to-paint/…