Skip to content
← Back to Community
⌚ Pure CSS clock ⏱ [UPDATED!!]
Profile icon
codingjlu

This is an accurate realistic clock I made with pure CSS (originally with SCSS). My original pen is here (yes I do use codepen xD).

And let me tell you one thing:

It's awesome!!

Screenshot:
image

Thanks guys.

Update

Now with dark mode!! Just click on the background and it will change colors :)

image
AND that’s still pure CSS

Voters
Profile icon
c83886353
Profile icon
AlexCheung6
Profile icon
sonicx180
Profile icon
EdwardBreheny
Profile icon
sojs
Profile icon
RolandJLevy
Profile icon
minishxp
Profile icon
wtdd
Profile icon
Code1Tech
Profile icon
Rufus310
Comments
hotnewtop
Profile icon
Vandesm14

The search is over! We found the god of CSS!

Profile icon
codingjlu

@Vandesm14 lol thanks I wouldn't say god though

Profile icon
ShaneAtReplit

@codingjlu Better than I could ever do: https://clock.vandesm14.repl.co (if you pardon the self-promotion)

Oops, work account lol

Profile icon
codingjlu

@ShaneVandegrif1 lol "ShaneVandegrif1" xD

Profile icon
codingjlu
Profile icon
CyberDaDev

bro urs is equally cool n legit noice @ShaneVandegrif1

Profile icon
ShaneAtReplit

@CyberHacker101 Lol thanks!

Profile icon
StringentDev

@Vandesm14 I have something for you btw. I made a webpage that does not need to reload when clicking on a link (dynamic loading) AND popstate (back and forward) works too.

Profile icon
Vandesm14

@StringentDev That's neat!

Profile icon
codingjlu

@StringentDev wow can you show me?

Profile icon
YousufalBarwani
Profile icon
CoolCoderSJ

@Vandesm14 god of CSS located didnt know you could actually do so much with CSS, this is neat!

Profile icon
CyberDaDev

When i saw ur username i instantly thought I got banned for some reason lol @ShaneAtReplit

Profile icon
ShaneAtReplit
Profile icon
Missingn0

@ShaneAtReplit I think your hour hand is decaled from real time by 90 degrees counterclockwise, so if you could fix that that would be great.

Profile icon
ShaneAtReplit

@Missingn0 The whole thing is broken. I haven't had the time or had the knowledge to fix it.

Profile icon
codingjlu

@ShaneAtReplit wait are you a moderator (your other account)

Profile icon
ShaneAtReplit

@codingjlu Yes, @Vandesm14 (also me) is a moderator

Profile icon
codingjlu

@ShaneAtReplit lol no wonder why you have like at least 3 accounts

Profile icon
ShaneAtReplit

@codingjlu I have 2, @Vandesm14 is my personal account and this is my work account. I recently changed it from @ShaneVandegrif1 to @ShaneAtReplit

Profile icon
codingjlu

@ShaneAtReplit what do you mean work account? You work for replit?

Profile icon
ShaneAtReplit

@codingjlu Yep! I'm an intern for their support team!

Profile icon
codingjlu

@ShaneAtReplit oh cool! I think I got an email from you xD Do you get paid or is it just work? (if you don't mind me asking)

Profile icon
ShaneAtReplit

@codingjlu I think we should continue this via email so we don't spam this amazing post! Email me at [email protected] and I'll be there!

Profile icon
codingjlu

@ShaneAtReplit cool thanks!

Profile icon
CyberDaDev

oke ima leave for the whole summer cya guys later @ShaneAtReplit

Profile icon
CyberDaDev

bro i opened it at the exact right time n its my forever clock lol @codingjlu

Profile icon
codingjlu

@CyberHacker101 lolol nice

Profile icon
P0GCHAMPB0i

i thought you also had to use script.js

Profile icon
codingjlu
Profile icon
TalinSharma

No you don't have to use JavaScript. Replit just adds that to the project as most websites use JavaScript. But this is made with css and js is not needed so @codingjlu could delete. @P0GCHAMPB0i

Profile icon
codingjlu
Profile icon
P0GCHAMPB0i

uwu this is actully gud!!!!!!

Profile icon
codingjlu

@P0GCHAMPB0i thanks! :)

Profile icon
SCOTBUTZBACH

Nice!

Profile icon
DheerajJadhav

AMAZING BRO

Profile icon
codingjlu
Profile icon
ASHstudioZ

This is sick😍!!!! bro i didnt understand the line wrapper part what is it.And plz explain why did u put those characters at the starting.\

Profile icon
codingjlu

@ASHstudioZ characters at the starting for fun; it's just a comment, and gets ignored by the computer.

For line wrappers, it's for rotation. See, when you rotate something (in CSS at least), the axis is at the center. So we have a wrapper that we spin, and inside the wrapper the lines rotate, but not at the center. I hope that makes sense (definitely not)?

Profile icon
cuber1515

Oh yes, the dark mode is great!

Profile icon
sojs

click event in CSS??? How.....

Profile icon
codingjlu

@sojs lookie my magic just look at the code xD. jkjkjk
trade secret (that I now announce to the whole world)

ANNOUNCING TO THE WHOLE WORLD!!!

but do keep it secret

an invisible checkbox, then:

.my-input:checked + .another-el { /* stylessssssss */ }

quick easy demo: https://codepen.io/codingjlu/pen/RwpexJX

Profile icon
sojs

wow thats pretty brains. @codingjlu

Profile icon
codingjlu

@sojs lol thx :)

Profile icon
sojs
Profile icon
codeitfast

Technically, there is also HTML. Does that mean it isn't pure css?

Profile icon
RahulChoubey1

@codeitfast big brain

plus the button events are js

Profile icon
codingjlu
Profile icon
RahulChoubey1

@codingjlu like the onclick event. Isn't that JS?

Profile icon
codingjlu

@RahulChoubey1 nope! It's magic CSS :) I manipulated it with a invisible checkbox :)

Profile icon
RahulChoubey1
Profile icon
codingjlu

@codeitfast we refer to just HTML and CSS as pure CSS :) no JS at all

Profile icon
codingjlu

@RahulChoubey1 there is no onclick event. It's pure CSS majic.

Profile icon
IGamer123

Noice

Profile icon
Coder100

well
only problem is it doesn't tell time

Profile icon
codingjlu

@Coder100 I think I've found a solution for the user to do it manually, but it's very hard xD

Profile icon
Coder100
Profile icon
RahulChoubey1

@codingjlu start it up at exactly 12:00, right?

Profile icon
codingjlu
Profile icon
glitchish

@codingjlu this is really cool!

Profile icon
[deleted]

What is SCSS?

Profile icon
codingjlu

@LeSensei it's a CSS preprocessor (Like Pug is to HTML) that reduces repetition :)

Profile icon
[deleted]

@codingjlu ok thx for the info

Profile icon
goosebag

i don't think its accurate though

Profile icon
[deleted]

@goosebag CSS can't perform that action. It doesn't have the ability to do that.

Profile icon
MaximilianLiceo

This is awesome, there is no way to display the correct date with only css right?

Profile icon
TalinSharma

Yeah... Sadly that is not possible. But i makes sense as CSS is a styling language and is not meant to do the calculations that would be required.

@MaximilianLiceo

Profile icon
tussiez
Profile icon
codingjlu

@tussiez :( lol what security threat?

Profile icon
tussiez

@codingjlu :thonk:

Profile icon
tankerguy1917

@tussiez They don't want us doing anything, do they?

Profile icon
codingjlu

@tussiez whoever your administrator is that's a bit too tight

Profile icon
tussiez

@tankerguy1917 *During school hours

Profile icon
tussiez

@codingjlu It happens really quickly - I was working on a Repl, reloaded, then BOOM! Blocked. :/

Profile icon
codingjlu

@tussiez woah what?

Profile icon
SleepySid

is loki alive ?

Profile icon
GhostKing007

@SudhanshuMishra u have watched loki?!? I have watched loki, it is amazing!

Profile icon
SleepySid

@GhostKing007 AAA

I have'nt watched it yet ... But I will soon

Profile icon
GhostKing007
Profile icon
SleepySid

looks beautiful

Profile icon
Whippingdot

awesome css...I will admit though that the time is wrong, and that you might be able to make the image more clearer. Still awesome work!

Profile icon
codingjlu

@Whippingdot sorry, I can't make it accurate time with pure CSS...

Profile icon
Whippingdot

Yeah wait I just realized that lol. You need JS for that right...

Awesome anyway for pure CSS. How did you do it? (RHETORICAL) @codingjlu

Profile icon
nilanshu96

Amazing! Thanks to your work I got to learn a lot

Profile icon
codingjlu

@nilanshu96 wow I'm honored!! Thank you so much!

Profile icon
nbash

what is this?

Profile icon
nbash

@nbash btw i will vote up! :)

Profile icon
codingjlu

@nbash a clock... ? thanks!

Profile icon
nbash

@codingjlu oh lol

Profile icon
[deleted]

Cool!

Profile icon
SilvermoonCat

coollll
but the time is wrong :’D

Profile icon
codingjlu

@SilvermoonCat it's pure CSS. What can you expect?

Profile icon
SilvermoonCat

oh ok I read it [email protected] I thougth by realistic you meant looks realistic and acts right too xD

Profile icon
[deleted]

/$$$$$$ /$$$$$$ /$$$$$$
/$$__ $$ /$$__ $$ /$$__ $$
| $$ _/| $$ _/| $$ _/
| $$ | $$$$$$ | $$$$$$
| $$ _
__ $$ ____ $$
| $$ $$ /$$ \ $$ /$$ \ $$
| $$$$$$/| $$$$$$/| $$$$$$/
_/ _/ ______/

Profile icon
codingjlu

@daddie that looks a bit messed up... put it in a code block

Profile icon
trueuser0

@codingjlu

/$$$$$$ /$$$$$$ /$$$$$$ /$$__ $$ /$$__ $$ /$$__ $$ | $$ \__/| $$ \__/| $$ \__/ | $$ | $$$$$$ | $$$$$$ | $$ \____ $$ \____ $$ | $$ $$ /$$ \ $$ /$$ \ $$ | $$$$$$/| $$$$$$/| $$$$$$/ \______/ \______/ \______/
Profile icon
cuber1515
/$$$$$$ /$$$$$$ /$$$$$$ /$$__ $$ /$$__ $$ /$$__ $$ | $$ \__/| $$ \__/| $$ \__/ | $$ | $$$$$$ | $$$$$$ | $$ \____ $$ \____ $$ | $$ $$ /$$ \ $$ /$$ \ $$ | $$$$$$/| $$$$$$/| $$$$$$/ \______/ \______/ \______/

why is this cool?

Profile icon
codingjlu

@cuber1515 because it is??

Profile icon
[deleted]
Profile icon
[deleted]
Profile icon
[deleted]
Profile icon
cuber1515

@codingjlu good answer.

Profile icon
Bunnytoes

this is super cool

Profile icon
codingjlu

@Bunnytoes thanks :)

Profile icon
JameRussell

This is an awesome project, and there is no upvote button on this page; I did upvote on the opened one though with a comment.
But I do have a question, how do you set the clock to the right time?

Profile icon
codingjlu

@JameRussell unfortunately that's not possible with pure CSS...

Profile icon
henrybutgolden

omg it is so cool!

Profile icon
ruiwenge2

wow this is awesome!

Profile icon
codingjlu

@ruiwenge2 thanks :)

Profile icon
ruiwenge2