Digital Clock Image Generator
Generate a digital clock image showing any time you choose, in 12-hour or 24-hour format. Pick a font, an optional glow, and a background and digit color, then download as PNG or JPG.
Input
Output
Readme
What is a digital clock image?
A digital clock shows the time as numerals rather than hands on a dial, the way alarm clocks, microwaves, and scoreboards do. This tool renders that look as a downloadable image, using real fonts already installed in your browser instead of a custom-drawn font, so the numerals stay crisp and consistent with what you see on screen.
Tool description
Set the hours, minutes, and seconds, or grab the current time with one click, then pick 12-hour or 24-hour format and whether to show seconds. Choose a font and font size, turn an LED-style glow on or off and dial in its intensity, and set an optional background color and a digit color, then download the result as a PNG or JPG.
Features
- Set any hours, minutes, and seconds, or fill in the current time instantly
- 12-hour format with an AM/PM label, or 24-hour format
- Toggle the seconds display on or off
- A choice of monospace and system fonts, so the preview always matches the download
- An optional glow with adjustable intensity, for a realistic LED or alarm-clock look
- An optional background, so you can export the digits on a transparent background
- Customizable background color, digit color, and font size
- Download as PNG or JPG, or print, at up to 3x resolution
How it works
The time is rendered as plain text in the font you choose, with tabular figures so every digit takes up the same width. Because different fonts place their glyphs differently relative to their own baseline and side bearings, the tool measures each font's actual rendered ink with the Canvas TextMetrics API and nudges the text so it stays centered in the panel no matter which font is selected. The glow is a text-shadow behind the digits, mimicking how a real LED display bleeds light onto its housing; turn it off for a flat, clean look. Because the display is built from fonts your browser already has installed rather than an embedded custom font, the downloaded image always looks exactly like the preview.
Tips
- Turn on the glow with a dark background and a red or green digit color for a realistic alarm-clock or scoreboard look.
- Turn off the background for a transparent PNG you can drop onto another design.
- Turn off "Show seconds" for a cleaner two-part time display, such as for a wall clock graphic or a thumbnail.
- Increase the font size for a large banner-style image, or keep it small for an icon or favicon source.