A CodePen by Hugo Giraudel. CSS temperature controler - If someone wants to fork and add some JS / animation to make the whole thing more dynamic, please go and show me. :) Inspired by R.sky work on Dribbble : http://dribbble.com/shots/657843-Temperature-

index.html

<div class="wrapper">
  <div class="background">
  	<div class="mask">
    	<div class="roll"></div>
    </div>
    <ul>
      <li>25</li>
      <li>50</li>
      <li>75</li>
    </ul>
    <span class="boiling">Boiling</span>
    <span class="freeze">Freeze</span>
  </div>
  
  
</div>

style.scss

@import "compass";
* { box-sizing: border-box; }

html { height: 100%; }

body {
  color:#aaa;
  font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-size:11px;
}
 
.wrapper {
  width:300px;
  height:300px;
  margin:0 auto;
  position:relative;
  top:-15px;
  background:white;
}

.background {
 	border-radius:0 0 150px 150px; 
  width:300px;
  height:150px;
  margin-top:150px;
  background: #df3341;
  background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
  background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
  background: -o-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%); 
  background: -ms-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
  background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
  position:relative;
  box-shadow: 0 1px 0 rgba(255,255,255,1), inset 0 -2px 3px rgba(0,0,0,0.1);
}

.background:after,
.background:before {
 	content:"";
  position:absolute;
  top:-11px;
  height:12px;
  width:25px;
  left:0;
  border-radius:12px 12px 0 0;
  background: #df3341;
  background: -moz-linear-gradient(left, #df3341 0%, #dd5144 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(100%,#dd5144));
  background: -webkit-linear-gradient(left, #df3341 0%,#dd5144 100%);
  background: -o-linear-gradient(left, #df3341 0%,#dd5144 100%);
  background: -ms-linear-gradient(left, #df3341 0%,#dd5144 100%);
  background: linear-gradient(to right, #df3341 0%,#dd5144 100%);
  box-shadow:inset 0 2px 1px rgba(0,0,0,0.2);
}

.background:after {
  background: #72c8d5;
  background: -moz-linear-gradient(left, #72c8d5 0%, #62c0eb 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#72c8d5), color-stop(100%,#62c0eb));
  background: -webkit-linear-gradient(left, #72c8d5 0%,#62c0eb 100%);
  background: -o-linear-gradient(left, #72c8d5 0%,#62c0eb 100%);
  background: -ms-linear-gradient(left, #72c8d5 0%,#62c0eb 100%);
  background: linear-gradient(to right, #72c8d5 0%,#62c0eb 100%);
  right:0;
  left:auto;
}

.mask {
  background:white;
  width:250px;
  height:250px;
  border-radius:50%;
  position:absolute;
  bottom:25px;
  left:25px;
  box-shadow:0 4px 3px rgba(0,0,0,0.2);
  z-index:100;
}

.mask:after {
 	content:"";
  display:block;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #6f6e6e;
  position:absolute;
  bottom:40px;
  right:35px;
  transform:rotate(135deg);
}

.roll {
 	width:210px; 
  height:210px;
  border-radius:50%;
  box-shadow:
    0 0 15px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.1),
    inset 0 -10px 5px #eaeaea,
    inset 0 10px 5px #f8f8f7;
  position:absolute;
  left:20px;
  bottom:20px;
  background:#f2f2f2;
  cursor:pointer;
}

.roll:after {
 	content:"";
  width:10px;
  height:10px;
  background:#e94646;
  border-radius:50%;
  display:block;
  position:absolute;
  bottom:25px;
  left:80px;
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.3);
}

.roll:before {
 	content:"58";
  position:absolute;
  left:85px;
  bottom:40px;
}

.background li {
 	position:absolute; 
}

.background li:nth-child(1) { 
  bottom:40px;
  right:10px;
}

.background li:nth-child(2) { 
  bottom:-20px;
  left:48%;
}

.background li:nth-child(3) { 
  bottom:40px;
  left:10px;
}

.background span {
 	position:absolute; 
  display:block;
  font-size:9px;
}

.boiling {
  top:-40px;
  left:-2px;
}

.freeze {
 	top:-40px;
  left:auto;
  right:-2px;
}