The Settings tab is split into General, Date Settings, and Danger. Every change shows up immediately in the clock preview at the top of the page and is written straight back into the browser address bar
General
| Option | Description |
|---|---|
| Custom Font | Type a font name, or click Select Font to pick one from the list — see Fonts |
| Font Top Color | Start color of the gradient, #22542b by default |
| Font Bottom Color | End color of the gradient, #bad5b8 by default. Clear the checkbox beside the label for a single color, which uses the top color only |
| Gradient Angle | 0 to 360 in steps of 10, 180° by default. Unavailable in single-color mode |
| Stroke Color | #ffffff by default |
| Stroke Width | -1 to 5 in px, 1 by default. Set it to 0 to drop the stroke entirely |
| Text Alignment | Left, Center, or Right — Left by default |
| Timezone | Follow System by default, meaning the timezone of the machine running the browser — see Timezone below |
| Background Color | A preview aid in the browser only. It is never written to the URL and never appears in OBS |
| Time Sync | Off by default — see Network Time Sync |
| Bold | On by default |
| Show Seconds | On by default |
| 12-Hour Format | Off by default, so the clock runs on 24-hour time |
Gradient and Stroke
The clock's color is a linear gradient running from Font Top Color to Font Bottom Color, in the direction set by Gradient Angle. The stroke is not a real font outline but a stack of same-colored shadows, so the wider the stroke, the more jagged the corners get
A semi-transparent text gradient only works if the text stroke is set to transparent as well
Timezone
The timezone list is generated at runtime from the browser's Intl API, covers every IANA timezone, and is sorted by UTC offset. Follow System and UTC sit at the top; everything else shows as a city name plus its offset, such as Shanghai (UTC+8)
The timezone only changes the moment the clock displays. It has no effect on where the local time itself comes from
Date Settings
Turning on Show Date adds a second line beneath the clock. Once it is on, changing Text Alignment to Center is recommended
| Option | Values | Default |
|---|---|---|
| Date Format Override | Follow System Language, zh-CN, zh-TW, en, ja, th, de, fr, no, it | Follow System Language |
| Weekday Format | Long, Short, Narrow, Hidden | Short |
| Day Format | Two-digit, Numeric | Two-digit |
| Month Format | Long, Short, Narrow, Two-digit, Numeric | Two-digit |
| Year Format | Long, Short, Hidden | Long |
| Date Font Size | 1 to 5 in steps of 0.02 | 3 |
Date layout is handed entirely to the browser's Intl.DateTimeFormat, so the same set of formats comes out in a different order per language — compare 2022年03月04日 周五 with Fri, 03/04/2022. Each format carries a live example in its dropdown, so you can see the result before choosing it
Date Font Size is measured in rem, so the default of 3 works out to 48px. The time itself is fixed at 85px, and the date size is what sets the relative weight of the two lines
Danger
Reset to Defaults strips every custom setting out of the URL and returns the page to its bare initial state. There is no undo, so copy the address somewhere safe first if you want to keep the current style
Related Links
- Using It in OBS - Getting the configured address into OBS
- URL Parameters - The parameter name and accepted values behind every option
Last updated on September 19, 2026