Flip Clock
A retro flip clock with smooth 3D flipping cards. Choose 12 or 24-hour time, show seconds and the date, pick a theme and go fullscreen to turn any screen into a desk clock.
Tip: double-click the clock for fullscreen, press Esc to leave. Your settings are saved on this device.
How to use the Flip Clock
- Choose 24-hour or 12-hour time. In 12-hour mode the AM/PM marker lights up beside the clock.
- Toggle seconds and date to make the clock as busy or as minimal as you like.
- Pick a theme: Light, Forest or the Dark display for night-time and bedside use.
- Press View fullscreen or double-click the clock to fill the screen. Press Esc or the ✕ to leave.
- Tick Keep screen awake to stop your phone, tablet or laptop dimming while the clock is showing.
How a split-flap clock works
Classic flip clocks, also called split-flap or Solari displays, print each digit on two halves of a card. The cards hang on a drum, and when the time changes the top half of the current card drops forward, revealing the top of the next number while its lower half falls into place over the bottom. This page recreates that motion in CSS 3D: the upper flap rotates 90° down, then the lower flap of the new digit rotates up from 90° to flat, taking about 0.6 seconds in total.
12-hour vs 24-hour time
| 24-hour | 12-hour | 24-hour | 12-hour |
|---|---|---|---|
| 00:00 | 12:00 AM (midnight) | 12:00 | 12:00 PM (noon) |
| 01:00 | 1:00 AM | 13:00 | 1:00 PM |
| 06:30 | 6:30 AM | 18:30 | 6:30 PM |
| 09:15 | 9:15 AM | 21:15 | 9:15 PM |
| 11:59 | 11:59 AM | 23:59 | 11:59 PM |
To convert from 24-hour time, subtract 12 from any hour above 12 and add PM. Hour 0 becomes 12 AM. The 12-hour mode on this clock leaves the first card blank for single-digit hours, just like a mechanical flip clock.
Ideas for using an online flip clock
- Desk clock on a spare monitor or old tablet, with the Forest or Light theme.
- Bedside clock using the Dark display at low screen brightness.
- Classroom or meeting room clock on a projector in fullscreen mode.
- Streaming or video backdrop: capture the window in your broadcasting software.
- Focus sessions: hide the date and seconds for a calm, minimal display.
Frequently asked questions
How do I use this flip clock as a screensaver?
Press View fullscreen, then tick Keep screen awake so the display does not sleep. The cursor hides after a few seconds without moving the mouse. On a computer you can also leave the browser in fullscreen with F11.
Is the flip clock accurate?
It shows your device's own clock and updates exactly on each second change. If the time looks wrong, check the date and time settings on your device and turn on automatic time.
Why does my screen still turn off?
The keep-awake option uses the Screen Wake Lock API, which works in Chrome, Edge, Safari 16.4+ and Firefox 126+. It only applies while the tab is visible, and some battery saver modes block it. If your browser does not support it, raise the auto-lock time in your device settings.
Can I show the time without seconds?
Yes. Untick Show seconds and the clock switches to a bigger hours and minutes layout.
Does the flip clock work on iPhone and iPad?
Yes. iPhone Safari does not allow true fullscreen for page elements, so the clock expands to cover the whole browser window instead. Add the page to your home screen for the most screen space.
Does it use my time zone?
Yes. The clock always shows local time from your device's time zone. To see other cities, use a world clock or time zone converter.