How do I add an analog clock widget to my website?

Customize the analog clock, copy the iframe code, and paste it into your website HTML where you want the clock to appear.

Can I change the time zone?

Yes, you can choose visitor local time or a specific time zone such as New York, London, Paris, Tokyo, Sydney, or UTC.

Can I hide the second hand?

Yes, you can turn the second hand on or off in the widget settings.

Can I customize the clock colors?

Yes, you can customize the face, frame, numbers, tick marks, hands, and center colors.

Back to Widgets

Analog Clock Widget

Free Website Widget. Create a customizable Analog Clock widget with clock hands and embed it on your website with a simple iframe code.

Live Preview

See exactly how your widget will look before copying the embed code

Embed Code

Open Preview

<iframe
  src="https://www.smartclocktools.com/embed/analog-clock?title=Local+Time&timezone=local&showSecondHand=true&faceColor=%230e172a&frameColor=%239f9f9fff&numbersColor=%23ffffff&tickColor=%239e9e9e&hourHandColor=%23ffffff&minuteHandColor=%23ffffff&secondHandColor=%23e8e8e8&centerColor=%23ffffff&font=Montserrat&fontSize=15&borderRadius=50&shadow=sm&width=250&height=250"
  width="250"
  height="250"
  loading="lazy"
  style="border:0;overflow:hidden;"
  title="SmartClockTools Widget"
></iframe>

Customize

Presets

TitleAdd a city name or custom label above the clockFace color

Frame color

Numbers color

Tick color

Hour hand color

Minute hand color

Second hand color

Center color

FontFont size: 15Timezone

ShadowWidth (px)Height (px)

How to embed the analog clock widget

Choose the clock style, customize the colors and size, copy the generated iframe code, and paste it into your website HTML.

Where to use this analog clock

This analog clock widget works well on school websites, dashboards, business pages, travel pages, office pages, and websites that need a visual clock.

Why use an iframe analog clock

An iframe keeps the analog clock isolated from your website styles and scripts, which makes it easy to embed and maintain.

Frequently Asked Questions

Customize the widget using the settings above, preview the result, and copy the generated iframe code when you are ready. The embed code can be added to websites and website builders that support HTML or iframe embeds.