Background Vignette

Experimenting with alpha transparency in gradients and multiple backgrounds.

Today I’m playing with gradients and one of my favorite CSS3 properties, alpha transparency.

To my great amusement, both transparent and rgba() work with gradients in the modern browsers, allowing us to create some snazzy effects – like page vignettes.

I’ve inserted a little linen texture for illustration, but thanks to multiple background support, the CSS is all on one body selector! Double boss.

Here’s the critical CSS:

html{ min-height:100%; } body{ /*Duplicative, vendor-prefixed styles for radial-gradient omitted for clarity.*/ background-image: radial-gradient(transparent, rgba(0,0,0,.7)), url(/img/linen.jpg); min-height:100%; }

That’s it! Easy, no?

The gradients are deceptively simple, requiring only declaring two colors (though a bunch of vendor prefixes as this is still experimental stuff as of this writing), but I’ll bet that’s mere serendipity and aesthetic preference. A number of defaults are presumed — take a look at the Mozilla documentation on radial gradients for full property info.

Since the content on the page may be short and not take a full browser window, we simply set a min-height:100%; to the html and body tags, thereby forcing at least a full browser window height. Otherwise, the gradient may cut off halfway down the page.