Date Countdown Widget 📆 Count2Date
Interactive date countdown widget to share and embed in websites. Specify the target date and time, customize the design and animation, pick what to show and hide. Generate a share link and an iframe embed code for websites.
Examples
;&c3=background_color:-rgb(1,-0,-40);&c6=color:-rgb(1,-0,-40);&img=https://count2date.com/img/fireworks.jpg&rep=year)
;&c3=color:-rgb(61,-255,-242);-background_color:-rgb(104,-72,-56);&c5=color:-rgb(54,-242,-230);&c6=color:-rgb(104,-72,-56);&c7=background-color:-rgb(255,-255,-255);-color:-rgb(118,-79,-69);&img=https://count2date.com/img/birthday.jpg&rep=month&css=~counter%7Btext_shadow:none!important%7D)
;&c3=background_color:-rgb(0,-2,-9);&c6=color:-rgb(0,-2,-9);&c7=color:-rgb(0,-0,-0);&img=https://count2date.com/img/bg.jpg&rep=week)
Settings and Features 🔧
Count2Date – Use the date picker to select the target date. Click the input field to select the date from the dropdown or enter it manually from your keyboard.
Count2Time – The timer allows you to cont down to a specific hour and minute of the selected day. By default it's set ot midnight (start of the day) but you can easily change that with the interactive time picker or by manually entering from your keyboard.
Title – The largest text displayed at the top of your countdown. Edit the title in the input box in the settings.
Subtitle – Located below the title with smaller text. It can be edited in a similar way as the main title.
Labels – The four text labels under the day, hour, minute and seconds displays. Changing these will allow you to translate the date countdown to any language.
Tag – A text with distinctive background color, located in the top left corner of the widget.
Link button – It can be found at the very bottom of the date countdown widget. A big call to action button with a link that opens in a new browser window. You can customize the text on the button and the link.
Repeat – The counter can be set to automatically set a new expiry date when the timer is up: daily, weekly, monthly and yearly. For example a new year's countdown can be set to restart automatically on New Year's Eve.
By default this feature is disabled and the counter shows a customizable message when the counter expires. This text can be customized in the input field on the right of the expiry dropdown.
Animation – There are four options available to animate the countdown. You can set the digits to roll, to fall, to pulsate or to change without any animation. Some templates add a distinctive background to the digits, depending on the selected animation style.
Design – Set the look of the widget picking one from the 11 available designs. See what matches your website template the most or pick one based on the tone of the background image. You can further customize the the colors by manually adjusting them with the color pickers.
Colors – When none of the predefined color templates fit you the 9 color pickers allow you to set custom text or background colors to each element. Hover your mouse above the inputs to read a tooltip explaining what they're about to adjust.
- Background
- Title text
- Subtitle text
- Countdown to label
- Counter digits
- Labels under counter digits
- Tag background (text color set by the background color)
- Link button background
- Link button text
Image – Set a background image for your widget. Specify the link to an image file that has big enough resolution and landscape orientation.
CSS – Style your counter with custom CSS rules. An advanced feature that requires some web design knowledge. Enter the CSS rules (Cascading Style Sheets) and click Save to apply them.
Show or hide – Decide what sections of the counter you wish to display or hide. The elements can be also hidden hovering them with the mouse then clicking the × icon in the top right corner.