<div class="clock">
	<div class="middle"></div>
	<div class="middle1"></div>
	<div id="hour" class="hour"></div>
	<div id="minute" class="minute"></div>
	<div id="second" class="second"></div>
</div>
@import url('https://fonts.googleapis.com/css?family=Pacifico');

$orange: #F68657;
$green: #70bd63;
$bg: #f8c985;

* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body  {
	display: flex;
	justify-content: center;
	align-items: center;
	background: $bg;
}

.clock {
	background: $orange;
	width: 50vmin;
	height: 50vmin;
	border-radius: 50%;
	position: relative;
	
	&:before {
		content: '';
		position: absolute;
		margin: auto;
		width: 3%;
		height: 12%;
		background: $green;
		left: 0;
		right: 0;
		top: -10%;
		z-index: -1;
		transform: rotate(10deg);
	}
	
	&:after {
		content: '';
		position: absolute;
		margin: auto;
		width: 8%;
		height: 16%;
		background: $green;
		left: 0;
		right: 15%;
		top: -10%;
		z-index: -1;
		transform: rotate(-40deg);
		border-radius: 100% 30% 50% 0;
	}
}

.middle1 {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 5%;
	height: 5%;
	background: darken($orange, 8);
	border-radius: 50%;
	z-index: 1;
}

.middle {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 5%;
	height: 5%;
	background: darken($orange, 10);
	border-radius: 50%;

	
	&:before {
		content: '';
		position: absolute;
		background: darken($orange, 3);
		width: 80%;
		height: 80%;
		border-radius: 50%;
		left: 400%;
		top: 150%;
		box-shadow: -20vmin -10vmin 0 0 darken($orange, 3),
			-10vmin -24vmin 0 0 darken($orange, 3),
			4vmin 10vmin 0 0 darken($orange, 3),
			-20vmin 14vmin 0 0 darken($orange, 3),
			-30vmin 4vmin 0 0 darken($orange, 3);
	}
	
	&:after {
		content: '';
		position: absolute;
		background: darken($orange, 3);
		width: 90%;
		height: 90%;
		border-radius: 50%;
		left: 400%;
		top: 150%;
		box-shadow: -26vmin -16vmin 0 0 darken($orange, 3),
			6vmin -14vmin 0 0 darken($orange, 3),
			-10vmin 8vmin 0 0 darken($orange, 3),
			-4vmin 18vmin 0 0 darken($orange, 3),
			12vmin -5vmin 0 0 darken($orange, 3);
	}
}

.hour {
	position: absolute;
	margin: auto;
	left: 49%;
	bottom: 50%;
	background: darken($orange, 30);
	width: 2%;
	height: 40%;
	transform: rotate(0);
	transform-origin: 50% 100%;
}

.minute {
	@extend .hour;
	transform: rotate(0);
	height: 48%;
	background: darken($orange, 20);
}

.second {
	@extend .hour;
	background: lighten($orange, 10);
	width: 1%;
	left: 49.5%;
	transform: rotate(0);
	height: 48%;
}
View Compiled
// colors by https://codepen.io/ilithya/pen/mqXpWP

setTime();

setInterval(function() {
  setTime();
}, 1000);

function setTime() {
	var d = new Date();
	var h = d.getHours();
	var m = d.getMinutes();
	var s = d.getSeconds();
	
	var hour 	 = 360 * (h / 12);
	var minute = 360 * (m / 60);
	var second = 360 * (s / 60);
	
	document.getElementById("hour").style.transform = 'rotate(' + hour + 'deg)';
	document.getElementById("minute").style.transform = 'rotate(' + minute + 'deg)';
	document.getElementById("second").style.transform = 'rotate(' + second + 'deg)';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.