How to Customize Timer Styling

Match your timer design to your brand identity with detailed styling controls.

Edit your timer: Navigate to the timer you want to customize.
Use the live preview: Watch the preview panel on the right as you make changes - it updates in real-time.
Start with a preset: In the "Background & Overlay" section, try different Presets (Carbon, Spring, etc.) to see how they affect the design.
Customize background:
- Enable overlay to add a colored layer
- Adjust overlay color and opacity
- Set corner radius for rounded corners
- For container layouts, try the blur effect for glass morphism
Style the title: In "Title Styling", adjust:
- Font size, color, and weight
- Margin (spacing below the title)
Style the timer numbers: In "Timer Styling", adjust:
- Font size, weight, and color
- Spacing between number blocks
- Margin around the entire timer block
Style the unit labels: In "Timer Units", adjust:
- Padding inside each unit block
- Label font size and weight
- Corner radius and background color for unit blocks
- Hide specific units or all labels
Style the separator: In "Separator Styling", adjust:
- Choose between colon or line separator
- Font size, weight, color, and margin
- Height (for line separators)
Style the description and button: Customize text and button colors, fonts, and hover states.
Adjust mobile styles: Scroll to "Mobile Settings" and override font sizes and spacing for mobile devices.
Save: Click "Save" when you're happy with the design.

Pro Tip: Use the preview panel to test different combinations before saving.