/ CSS3

How to create nice color indicator with CSS3

Hello everybody who is interested in different css ornamentation :) .
Today I’ll explain how to create next element with CSS3:

![css3 color indicator](/content/images/2013/Dec/image_thumb-1.png)

Here is HTML: `
`

And CSS:

.circle {
  background: #c0c0c0;
  background: -moz-linear-gradient(top, #c0c0c0 0%, #505050 50%, #c0c0c0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0c0c0), color-stop(50%,#505050), color-stop(100%,#c0c0c0));
  background: -webkit-linear-gradient(top, #c0c0c0 0%, #505050 50%, #c0c0c0 100%);
  background: -o-linear-gradient(top, #c0c0c0 0%, #505050 50%, #c0c0c0 100%);
  background: -ms-linear-gradient(top, #c0c0c0 0%, #505050 50%, #c0c0c0 100%);
  background: linear-gradient(to bottom, #c0c0c0 0%, #505050 50%, #c0c0c0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0c0c0', endColorstr='#c0c0c0',GradientType=0);
  
  border-radius: 60px;
  padding: 3px;
  height: 60px;
  width: 60px;
}

.circle > div {
  background: #fff;
  border-radius: 60px;
  -moz-box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 0px 0px 10px 10px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.75);
  height: 60px;
  width: 60px;
}

In my example it look like this:

![color picker](/content/images/2013/Dec/image_thumb-2.png)

Thanks for reading and good luck!