I have been reading about HTML 5 and CSS 3 for a while now and thought I would try some experiments with some of the new CSS 3 properties. This little snippet will put an inner-shadow on the body element by using 5 different image backgrounds to define the shadow.

You can view a demo here. Note, not supported in all browsers as of May 2010, but should work in the latest versions of Chrome, Safari and Firefox.

HTML

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Multiple Backgrounds</title>
	<style type="text/css" media="all">@import "backgrounds.css";</style>
</head>
<body>
	<h1>Lorem ipsum dolor sit amet</h1>
</body>
</html>

CSS

body{background:url(images/upper-left.png) top left no-repeat,
 url(images/upper-right.png) top right no-repeat,
 url(images/right.png) right repeat-y,
 url(images/top.png) top left repeat-x,
 url(images/left.png) left repeat-y;
 background-color:#d2d0d0; padding:50px;}