What is a flip clock widget?

A flip clock widget displays time using split cards inspired by mechanical flip clocks and airport departure boards.

Can I change the flip clock time zone?

Yes. You can display visitor local time or choose a specific city and IANA time zone.

Yes. The seconds card can be enabled or disabled in the widget settings.

Can I customize the card colors?

Yes. You can customize the upper and lower card colors, number color, divider, background, font, spacing, and border radius.

Back to Widgets

Flip Clock Widget

Free Website Widget. Create a customizable retro Flip-Clock for your website with time zones, seconds, dates, multiple languages, and iframe embedding.

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/flip-clock?title=Local+Time&showDate=true&showLabels=true&showSeconds=true&timezone=local&format=12&language=en&background=%23fdfcfc&cardBackground=%231f2937&cardTopColor=%23ffffff&cardBottomColor=%23e2e8f0&textColor=%230f172a&accentColor=%23262626&dividerColor=%23cbd5e1&font=Lora&fontSize=58&cardRadius=12&borderRadius=0&gap=12&shadow=none&width=560&height=260"
  width="560"
  height="260"
  loading="lazy"
  style="border:0;overflow:hidden;"
  title="SmartClockTools Widget"
></iframe>

Customize

Presets

Time formatTitleAdd a city name or custom title above the clockWidget background

Card top color

Card bottom color

Number color

Accent color

Card divider color

FontFont size: 58Card radius: 12Card spacing: 12Widget radius: 0Timezone

LanguageShadowWidth (px)Height (px)

How to embed the flip clock widget

Choose a time zone, customize the flip cards, select a preset, and copy the generated iframe code into your website.

Where to use a flip clock

Flip clocks work well on event pages, dashboards, hotels, airports, offices, landing pages, retro websites, and digital information displays.

A customizable retro clock

The flip clock combines a retro mechanical appearance with modern options such as multiple languages, responsive sizing, dates, and time zones.

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.