Customize the countdown in CSS

Customizing the countdown with CSS

The countdown can be fully customized using CSS.

The goal is to let you easily adjust its appearance (size, colors, spacing, borders, etc.) while keeping a stable base structure.

Base CSS structure

Here is a guided CSS structure you can use as a starting point.

Each section corresponds to a specific part of the component.

1. Global container

The main container wraps the entire countdown.

.p3-countdown {
  /* Global background */
  /* background: */

  /* Global inner spacing */
  /* padding: */

  /* Spacing between blocks (Hours / Minutes / Seconds) */
  /* gap: */
}

2. Blocks (hours / minutes / seconds)

Each countdown unit is contained in a block.

.p3-countdown .unit {
  /* Block background */
  /* background: */

  /* Inner spacing */
  /* padding: */
}

3. Numbers (00, 12, etc.)

This section controls the display of the digits.

.p3-countdown .unit h3 {
  /* Font size for numbers */
  /* font-size: */

  /* Number color */
  /* color: */

  /* Line spacing */
  /* line-height: */
}

4. Labels (hours / minutes / seconds)

The labels under the numbers can also be styled.

.p3-countdown .unit .secondary {
  /* Font size for labels */
  /* font-size: */

  /* Text color */
  /* color: */
}

Example of applied adjustments

Here is an example of CSS adjustments used to improve the overall design of the countdown, including an automatic “:” separator between blocks to improve readability.

.p3-countdown {
  gap: 30px;
}

.p3-countdown .unit {
  position: relative;
}

.p3-countdown h3.junipero {
  line-height: 33px;
}

.p3-countdown .unit:not(:last-child)::after {
  content: ":";
  position: absolute;
  right: -18px;
  top: 45%;
  transform: translateY(-50%);
  font-size: 24px;
}

Best practices

For a clean and consistent design:

• keep contrast simple for better readability
• avoid overloading blocks with too many visual effects
• test responsiveness on mobile devices

Updated on: 12/06/2026