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

Here is HTML:

  <div class="circle"><div></div></div>

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

Thanks for reading and good luck!

Menu