How to Use: Free Clocks for Your Website

1. Select a clock template in the Text based section under Select Clock Template. This will not only determine the general look of the clock but also some of the default settings in other sections of the wizard.
2. Select location clock should show time for: Choose a location to determine the local time shown on your clock. If the location you are looking for is not listed in the drop-down menu, use the Search... or Time Zones... buttons.
3. Customize clock output: This section determines the actual content of the clock, while the following sections deal with the clock's appearance.
   • Country/Language: Set the language of the month and day names displayed in the clock. This also determines the formats used if you select Default for country/language in the drop-down menus below.
   • Display date: Add or remove the current date.
   • Weekday, Month, Day, and Between date and time: Specify if and in which format the day of the week, month, and day number should be shown in the clock, as well as what should be shown between the date and the time in the clock. These options are only available if you select an option including the date in the Display date drop-down menu.
   • Hour: Choose the time format. 24-hour is the system also referred to as military time; 12-hour AM/PM is the format commonly used in the United States and some other countries. More info
     Note that this option is only available if you select an option including the time in the Display date drop-down menu.
4. Text and font: Customize the appearance of the text in the clock. Enable Show font samples to get an indication of what each font looks like. Your choices will also be reflected in the clock preview in the bottom-right corner of the screen. The font color can be selected either by clicking on the little square or by entering the HTML color code into the # field.
5. Borders and background: Create a frame around the date and time display. Select Common border to customize the thickness, style, and color of the entire border; Separate top/left/bottom/right border allows you to customize each of the four border walls separately.
6. Padding: Add empty space around the date and time display. Select Common padding on each side to add an equal amount of padding on all four sides of the clock; to add different amounts of padding on each of the four sides, select Separate top/left/bottom/right padding.
7. Background and alignment: Add the final touches to your clock by specifying the background color for the clock (Clock background color) and the background portions of the widget surrounding the clock face. The latter should normally either be transparent or have the same color as the part of your page where the clock will appear. The color can be selected either by clicking on the little square or by entering the HTML color code into the # field. Choose transparent if you would like the clock to blend in with the background of your website or blog, making only the clock text appear without an additional background. This section also allows you to change the horizontal alignment of the text from left, center or right, and the vertical alignment from top, center, or bottom.
8. Select type of web page/server and create HTML: Select the type of web page or server. This one is important to get right because your clock might not display correctly on your website or blog if you make the wrong choice here. Only use Secure web page (https/SSL server) if your website is on a secure server (https). If you are unsure, it is best that you select Secure web page (https/SSL server).
9. HTML code: This field shows the code for your clock. Copy it and add it to your website or blog.

1. Select a clock template in the Analog Clocks section under Select Clock Template. This will not only determine the general look of the clock but also some of the default settings in other sections of the wizard.
2. Select location clock should show time for: Choose a location to determine the local time shown on your clock. If the location you are looking for is not listed in the drop-down menu, use the Search... or Time Zones... buttons.
3. Analog Clock Size: Select the size of the clock. Choose Custom for more options.
4. Clock Face Background: Select the color of the clock face. Keep an eye on the clock preview in the bottom-right corner of the screen to track the choices you make.
   • Back. Color: Choose the clock face color. It can be selected either by clicking on the little square or by entering the HTML color code into the # field.
   • Gradient: Tick this box if you would like the selected background color to blend into a different color towards the edge of the clock.
   • Shadow: Add a shadow frame in a color of your choice around your clock.
5. Clock Face Circles: Add a colored circle to the edge of the clock face. Make sure to select a Border width greater than 0% for the circle to show. Select Draw Extra Circle to add a second circle within the first one. The Distance menu determines where the second circle appears—the smaller the percentage, the closer it is to the clock's center.
6. Clock Face Numbers: Specify if the clock should show hour numbers, which ones should be included, in which language they should appear, and how they should look. The Distance menu determines the numbers' placement on the clock face.
7. Tick marks: Customize the clock's tick marks. These are the dots or lines appearing around the edge of the clock face indicating minutes and seconds.
   • Add or remove ticks via the tick boxes: Enable quarter ticks (ticks at 3, 6, 9, and 12 hours), Enable hour ticks (ticks at hours other than 3, 6, 9, and 12), and Enable minute ticks (minute and second ticks between the hour ticks).
   • The fields below each of the tick boxes allow you to choose the ticks' appearance:
     • Tick Color: Choose the color of the ticks either by clicking on the little square or by entering the HTML color code into the # field.
     • Tick Style: Select the form of the ticks. See the clock preview in the bottom-right corner to see what each option looks like on the clock face.
     • Tick Length and Tick Width: Change the size of the tick marks.
     • Tick Distance: Change the placement of the ticks—the smaller the percentage, the closer they appear to the clock's center.
8. Customize Clock Hands: Choose the appearance of the hour, minute, and second hands.
   • Add or remove each hand via the Show hour hand, Show minute hand, and Show second hand tick boxes.
   • Hand Color: Choose the color of the hands either by clicking on the little square or by entering the HTML color code into the # field.
   • Hand Style: Select the general form of the hand.
     • Blockstart: Hand has a thicker section towards the center of the clock face.
     • Taper: Hand becomes gradually thinner towards its tip.
     • Line: Hand consists of a consistent line without additional features.
   • Hand Length: Change the hand's length measured from the clock's center to the hand's tip.
   • Back Length: Specify how far the hand's base should extend from the clock's center away from the direction it which it points.
   • Hand Width: Choose the hand's width.
   • Center Size: Add thickness to the base of the hand, where it is mounted to the clock face.
9. Select type of web page/server and create HTML: Select the type of web page or server. This one is important to get right because your clock might not display correctly on your website or blog if you make the wrong choice here. Only use Secure web page (https/SSL server) if your website is on a secure server (https). If you are unsure, it is best that you select Normal web page (http server).
10. HTML code: This field shows the code for your clock. Copy it and add it to your website or blog.

Do you already have a clock from timeanddate.com on your website or blog and wish to change it or create a new clock based on the one you already have?

1. Copy the clock's code from your website or blog.
2. Open our Free Clocks page and click on Copy/Modify Clock.
3. Paste the clock code into the text field that appears.
4. Click Import from HTML.
5. The set-up wizard now shows the settings for your existing clock. Change the settings according to your wishes, following the instructions detailed above, under Setting up a text-based clock (HTML/Javascript) or Setting up an analog clock.
6. When you are done, copy the new HTML code from the HTML code field at the bottom of the set-up wizard, and paste it into your website or blog.

This can have a number of reasons, including:

• You have selected the wrong option under Select type of web page/server and create HTML. If your website is on a secure server (https), please make sure you select Secure web page (https/SSL server).
• The website program you are using does not allow Iframes. If you are unsure, we might be able to help.

It's very likely that you have selected the wrong time zone when setting up the clock. To change it, please follow the instructions under Editing an existing clock above and make sure to select a location in the correct time zone under Select location clock should show time for in the set-up wizard.

You can select any of the 5000+ locations in our database. If your city doesn't appear in the drop-down under Select location clock should show time for, click on Search..., enter the city into the search field, select it from the list of suggested locations, and click Select.

Some of our services also include millions of additional locations provided by the GeoNames database. However, these GeoNames locations cannot be selected for the free clocks yet.

To select a different clock format, follow the instructions under Editing an existing clock above and make sure to select the correct format in the Hour menu in the set-up wizard.

Not at the moment, but we are planning to offer a pro version without the logo and link in the future.

You may place up to six clocks on a single page. If more than two clocks are used, a separate link to timeanddate.com should be provided on the page.

If the website or blog is on a secure server, the web adress (URL) starts with https. If that is the case, select Secure web page (https/SSL server). Otherwise, use Normal web page (http server).

Yes, the clocks automatically adjust for all Daylight Saving Time (DST) clock switches.

Yes, please follow the instructions under Editing an existing clock above.

Great you asked! Yes, we do. You will find them here.

The General FAQ Page answers your questions about timeanddate.com, our services, site-wide settings, customization options, advertising opportunities, and copyright policies.