Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith
background: linear-gradient(#777, #FFF);
background: linear-gradient(left, #AAA, #FFF);
background: linear-gradient(-45deg, #AAA, #FFF);
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;
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;
background: radial-gradient(#FFF, #64d1dd, #777);
background: radial-gradient(circle, #FFF, #64d1dd, #777);
radial-gradient(50px 30px, circle, #FFF, #64d1dd, #777);
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);
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);
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%);
}