The Analog Clock effect turns a screen into a large analog clock face with hour, minute, and optional second hands. It works as a standalone timepiece for a desk, a lobby, or a classroom wall — anywhere you want the time visible without a phone or a wall clock.
Before you start
- A screen you're comfortable leaving on showing the browser tab or window, since this runs in the browser rather than as a system wallpaper.
- A background color in mind, if you don't want the default dark charcoal face. Have a hex code ready if you're matching a brand or room color.
Set it up
- Open the Analog Clock effect. The Controls panel appears with no tabs — this effect has no Brightness or Color Temperature sliders, only its own style and color settings.
- Choose a Clock Style from the dropdown: Classic, Roman Numerals, Modern, Minimal, Luxury, Dots Only, or Vintage.
- Toggle Show Second Hand on or off.
- Set Background Color using the color picker.
- Set Clock Color to control the face outline, hands, and numbers.
- Select Go Fullscreen to hide the tabs, address bar, and controls.
You'll know it worked when the clock face redraws instantly in the new style and colors, with the hands showing the correct current time.
To leave fullscreen, press Escape or move your mouse and select Exit Fullscreen.
What each control does
| Control | Options | Default | What it changes |
|---|---|---|---|
| Clock Style | Classic, Roman Numerals, Modern, Minimal, Luxury, Dots Only, Vintage | Classic | The overall look: face background, border, number style, and hand thickness. Roman Numerals shows Roman numerals instead of digits; Minimal and Dots Only drop numbers for a cleaner face. |
| Show Second Hand | on/off | On | Adds or removes the sweeping second hand. Off gives a stiller, quieter face — useful where movement is distracting. |
| Background Color | any color | Dark charcoal (#18181b) | The color that fills the screen behind the clock. |
| Clock Color | any color | White | The color of the clock face's border, hands, numbers, and marks. |
The effect page also lists a Background Image option, but it does not currently appear as a control anywhere in the interface — see Troubleshooting below.
Common setups
- Minimalist desktop display. Modern style, Show Second Hand off, Background Color set dark (
#18181bor similar). Clean and quiet, good for a screen you glance at while working. - Classroom or focus timer. Classic or Roman Numerals style with Show Second Hand on, so the passage of time is visible from across the room.
- Lobby or waiting room. Luxury style, Clock Color matched to a brand color, Show Second Hand on for a display that reads as intentional rather than idle.
- Bedside or low-light room. Minimal style, Show Second Hand off, Background Color near-black, Clock Color a dim gray rather than pure white to cut glare.
Troubleshooting
The numbers vanished after I picked a style. Dots Only and Minimal are designed without numbers — Dots Only uses dot markers, Minimal uses plain hour marks. Switch to Classic, Roman Numerals, Modern, Luxury, or Vintage to get numbers back.
My style and color choices are gone after I reloaded the page. Expected — none of this effect's settings are saved. They reset to Classic style, second hand on, dark background, and white clock color every time the page loads. Re-select your settings, or keep the tab open instead of reloading.
The clock is tiny in one window and huge in another. The clock scales to fill 80% of the smaller dimension of its container, between roughly 150 and 800 pixels. A narrow or short browser window produces a small clock; maximize the window or use Fullscreen for the largest size.
Roman numerals show up as regular numbers, or vice versa. Roman numeral formatting only applies when Clock Style is set to Roman Numerals. Every other style shows standard numbers (or none, for Minimal and Dots Only).
Next steps
If you want a numeric, LED-style readout instead of hands, try Digital Clock. For multiple time zones on one screen, use Analog World Clock.