Warum ist mein Countdown-Timer mit transparentem Hintergrund unscharf?

Zuletzt aktualisiert 30. Oktober 2026

Countdown-Timer sind GIFs, und das GIF-Format kommt mit Transparenz nicht gut zurecht. Jedes Pixel ist entweder komplett durchsichtig oder komplett deckend, sodass die weichen Ränder um die Ziffern herum mit einer Hintergrundfarbe deiner Wahl verschmelzen. Auf jedem anderen Hintergrund sehen diese Ränder gezackt oder verschwommen aus, besonders bei kleinen Timern. Das ist eine Einschränkung des Dateiformats, aber diese Tipps machen einen großen Unterschied.

Die folgenden Beispiele sind echte Timer-Bilder, rechts ist eine vergrößerte Ansicht der Ränder zu sehen.

1. Verwende nach Möglichkeit einen einfarbigen Hintergrund

Deine E-Mail hat sowieso einen Hintergrund hinter dem Timer. Stell den Hintergrund des Timers auf dieselbe Farbe ein – dann sieht er viel schärfer aus als ein transparenter. Wenn der Timer auf einem Farbverlauf oder einem Foto liegt, lade diesen Teil deines Designs stattdessen als Hintergrund für den Timer hoch. Siehe So verwendest du dein eigenes Hintergrundbild für einen Timer.

Ein transparenter Timer auf einem hellorangen Hintergrund mit rauen, blassen Rändern um die Ziffern herum, daneben ein Timer mit einem einfarbigen Hintergrund in derselben Orangetönung, der glatte Ränder hat. Vergrößerte Ausschnitte zeigen den Unterschied

2. Wähle trotzdem eine Hintergrundfarbe mit Transparenz aus

Selbst wenn Transparent Wähle die Hintergrundfarbe aus, die dem E-Mail-Bereich, in dem der Timer platziert wird, am ähnlichsten ist. Sendtric nutzt diese Farbe, um die Ränder zu glätten. Wenn der Bereich mehrere Farben hat, wähle die Hauptfarbe aus.

Ein durchsichtiger weißer Timer auf einem marineblauen Hintergrund. Bei weißem Hintergrund haben die Ziffern einen blassen Lichtschein; bei marineblauem Hintergrund verschmelzen die Ränder mit dem Hintergrund.

3. Vergrößere den Timer

Kleine GIFs haben nur wenige Pixel pro Ziffer, daher nimmt jede unscharfe Kante einen größeren Teil der Ziffer ein. Wähle ein größeres Größe in Visuelles Design.

Ein transparenter Timer in der Größe „X-Small“ in Originalgröße, derselbe Timer in der Größe „X-Small“, dreifach vergrößert, sodass er die Breite eines Timers in der Größe „Large“ erreicht – wobei die Ziffern klobig wirken – sowie ein Timer in der Größe „Large“ in Originalgröße mit glatten Ziffern

4. Eine Kontur hinzufügen

Textkontur aktivieren in Text & Beschriftungen (Power und höher). Schon ein 1-Pixel-Umriss in derselben Farbe wie die Ziffern sorgt für mehr Fülle, wodurch unschöne Kanten verdeckt werden.

Ein transparenter Timer ohne Umrandung und mit einer 1-Pixel-Umrandung in Marineblau, die dieselbe Farbe wie die Ziffern hat. Vergrößerte Ausschnitte zeigen, dass die Umrandung den Strich der Ziffern dicker und fülliger macht.

5. Verwende eine fetter gesetzte Schriftart

Dünne Striche sind meistens Kanten, daher sind sie am stärksten betroffen. Eine fette Schriftart wie Archivo Black bleibt scharf. Ändere die Ziffern und Etiketten Schriftarten in Text & Beschriftungen (kostenpflichtige Tarife).

Ein transparenter Timer in der schlanken Schriftart „Raleway“, deren Striche größtenteils aus Kantenpixeln bestehen, neben demselben Timer in der fetten Schriftart „Archivo Black“ mit durchgezogenen, klareren Ziffern

Wenn du mehr über E-Mail-Countdown-Timer erfahren möchtest, schau dir unseren Seite „E-Mail-Countdown-Timer“.