Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith

Section 3 • Gradients

background: linear-gradient(#777, #FFF);
background: linear-gradient(left, #AAA, #FFF);
background: linear-gradient(-45deg, #AAA, #FFF);
Figure 22: Three simple gradients: default top to bottom, left to right, and top left (-45 degree rotation from top/center), respectively.

Think beyond the bulb

Light Bulb
border: 1px solid #DDD;
background: -moz-linear-gradient(#DDD, #FFF 20%);
background: -ms-linear-gradient(#DDD, #FFF 20%);
background: -webkit-linear-gradient(#DDD, #FFF 20%);
background: -o-linear-gradient(#DDD, #FFF 20%);
background: linear-gradient(#DDD, #FFF 20%);
box-shadow: 2px 2px 4px #EEE;
Figure 23: A subtle gradient gives a professional touch.
border: 1px solid #DDD;
background-color:#EEE;
background: -moz-linear-gradient(left, #999, #fff 47%, #fff 52%, #999 100%);
background: -ms-linear-gradient(left, #999, #fff 47%, #fff 52%, #999 100%);
background: -webkit-linear-gradient(left, #999, #fff 47%, #fff 52%, #999 100%);
background: -o-linear-gradient(left, #999, #fff 47%, #fff 52%, #999 100%);
background: linear-gradient(left, #999, #fff 47%, #fff 52%, #999 100%);
box-shadow: 2px 2px 2px #CCC;
Figure 25: A gradient with two stop points (as well as the start and end points) gives an interesting sense of depth.
background: radial-gradient(#FFF, #64d1dd, #777);
background: radial-gradient(circle, #FFF, #64d1dd, #777);
radial-gradient(50px 30px, circle, #FFF, #64d1dd, #777);
Figure 27: Three three-color radial gradients. The first is the default "fit-to-shape" gradient, the second is a circular gradient, and the third is a positioned circular gradient.
background: radial-gradient(50px 30px,circle farthest-corner, #FFF, #64d1dd, #777);
background: radial-gradient(50px 30px, circle farthest-side, #FFF, #64d1dd, #777);
background: radial-gradient(50px 30px, circle closest-corner, #FFF, #64d1dd, #777);
background: radial-gradient(50px 30px, circle closest-side, #FFF, #64d1dd, #777);
Figure 28: The four radial gradient size keywords in action.
margin:50px 0 0 200px;
height:150px;
width:150px;
border:2px solid #DDD;
border-radius:50%; /* turns rectagular div into a circle */
background:
 -moz-radial-gradient(50px 40px, circle farthest-corner, 
   #FFF, #ff58ba, #777);
background:
 -webkit-radial-gradient(50px 40px, circle farthest-corner, 
 #FFF, #ff58ba, #777);
background:
 radial-gradient(50px 40px, circle farthest-corner,  
   #FFF, #ff58ba, #777);
Figure 29: A div with 50% rounded corners creates a circle, and a radial gradient background is positioned within it.
#cylinder {
	margin:50px 200px;
	height:150px;
	width:120px;
	border-bottom:none;
	background: -moz-linear-gradient(left, #777, #FFF 20%, 
 	  #FFF 60%, #777 100%);
	position:relative;
	}
#cylinder:after { /* top oval */
	content:"";     /* empty text string */
	position:absolute;
	height:20px;
	width:120px;
	top:-10px;
	left:0px;
	border-radius:50%;
	background: -moz-radial-gradient(#FFF, #777);
	}
#cylinder:before { /* bottom oval */
	content:"";       /* empty text string */
	position:absolute;
	height:20px;
	width:118px;
	bottom:-10px;
	left:-1px;
	border-radius:50%;
	border-bottom:2px solid #CCC;
	border-left:2px solid #CCC;
	border-right:2px solid #CCC;
	background:-moz-linear-gradient(left, #777, 
          #FFF 20%, #FFF 60%, #777 100%);
	}
Figure 31: A rectangle and two ellipses are carefully positioned to create a cylinder.