<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
body {
	background: #9999ff;
}

div {
	width: 90px;
	height: 20px;
	border-radius:20px;
}

.c1,
.c3 {
	background: -webkit-linear-gradient(left, transparent, white);
	background: -o-linear-gradient(left, transparent, white);
	background: -moz-linear-gradient(left, transparent, white);
	background: linear-gradient(left, transparent, white);
}


.c2 {
	background: -webkit-linear-gradient(right, transparent, white);
	background: -o-linear-gradient(right, transparent, white);
	background: -moz-linear-gradient(right, transparent, white);
	background: linear-gradient(right, transparent, white);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.