how to make a css clock

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

body
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #091921;
}

.clock 
{
	width: 350px;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url(clock.png);
	border-radius: 50%;
	background-size: cover;
	border: 4px solid #091921;
	box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
					inset 0 -15px 15px rgba(255, 255, 255, 0.05),
					0 15px 15px rgba(0, 0, 0, 0.03),
					inset 0 15px 15px rgba(0, 0, 0, 0.03);
}

.clock:before
{
	content: '';
	position: absolute;
	width: 15px;
	height: 15px;	
	background: #fff;
	border-radius: 50%;
	z-index: 10000;	
}

.clock .hour,
.clock .min,
.clock .sec
{
	position: absolute;
}

.clock .hour, .hr
{
	width: 160px;
	height: 160px;
}


.clock .min, .mn
{
	width: 190px;
	height: 190px;
}

.clock .sec, .sc
{
	width: 230px;
	height: 230px;
}

.hr, .mn, .sc
{
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	position: absolute;
	border-radius: 50%;	
}

.hr:before
{
	content: '';
	position: absolute;	
	width: 8px;
	height: 80px;
	background: #ff105e;
	z-index: 10;
	border-radius: 6px 6px 0 0; 
}



.mn:before
{
	content: '';
	position: absolute;	
	width: 4px;
	height: 90px;
	background: #fff;
	z-index: 11;
	border-radius: 6px 6px 0 0; 
}



.sc:before
{
	content: '';
	position: absolute;	
	width: 2px;
	height: 150px;
	background: #fff;
	z-index: 12;
	border-radius: 6px 6px 0 0; 
}

View another examples Add Own solution

4.25

Two feathers 125 points

                                    &lt;html&gt;
&lt;head&gt;
	&lt;meta charset=&quot;UTF-8&quot;&gt;
	&lt;title&gt;Clock&lt;/title&gt;
	&lt;script language=&quot;Javascript&quot; type=&quot;text/Javascript&quot; src=&quot;libraries/p5.js&quot;&gt;&lt;/script&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;	
		&lt;style&gt; body {padding: 0; margin: 0;} &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class=&quot;clock&quot;&gt;
		&lt;div class=&quot;hour&quot;&gt;
			&lt;div class=&quot;hr&quot; id=&quot;hr&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;min&quot;&gt;
			&lt;div class=&quot;mn&quot; id=&quot;mn&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class=&quot;sec&quot;&gt;
			&lt;div class=&quot;sc&quot; id=&quot;sc&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;script type=&quot;text/javascript&quot;&gt;
      // first for css you need to go to online tutorials channel and download the image and put it in your folder
		const deg = 6;
		const hr = document.querySelector('#hr');

		const mn = document.querySelector('#mn');

		const sc = document.querySelector('#sc');


		setInterval(() =&gt; {



		let day = new Date();
		let hh = day.getHours() * 30;
		let mm = day.getMinutes() * deg;
		let ss = day.getSeconds() * deg;



		hr.style.transform = hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;




		mn.style.transform = `rotateZ(${mm}deg)`;




		sc.style.transform = `rotateZ(${ss}deg)`;
		})	





		let day = new Date();
		let hh = day.getHours() * 30;
		let mm = day.getMinutes() * deg;
		let ss = day.getSeconds() * deg;

		hr.style.transform = hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;


		mn.style.transform = `rotateZ(${mm}deg)`;


		sc.style.transform = `rotateZ(${ss}deg)`;

	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Thank you! 4

4.25 (4 Votes)

3.83

Kutyel 105 points

                                    // and now you have a clock

Thank you! 6

3.83 (6 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category CSS

CSS 2022-03-27 22:50:16 make text bigger html5
CSS 2022-03-27 21:40:08 move list item to left css
CSS 2022-03-27 21:35:05 reduce image size css
CSS 2022-03-27 21:30:21 css image background center horizontally in div
CSS 2022-03-27 21:05:02 css button styles
CSS 2022-03-27 18:50:09 compass font awesome
CSS 2022-03-27 18:50:06 modal in materialize css
CSS 2022-03-27 17:55:12 box round corner css
CSS 2022-03-27 17:45:12 jquery add css
CSS 2022-03-27 17:45:01 css image fit in div with aspect ratio

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

css on clock css make a clock digital clock html css clock css html clock with css css clock animation how to make a clock using html and css how to design a clock in css timer clock css css for clock or css digital clock in css html css clock how to make a clock in css mKING CLOCK WITH CSS css make clock thow to make a clock with css clock in html and css clock in html css clock css format make a running clock in css clock in css block css page clock clock html css how to make clock css how to make a clock css clock timer css css for clock how to make a clock in html and css clock css clock animation css css clock rotating clock animation css css round clock css animation clock rotate clock hand transform origin make a clock css wiggly clock line css how to animate a clock face css animation clock background change css css clock hand how to make a css clock

how to make a css clock

Welcome Back!

Create a Free Account