Chrom-Texteffekt: metallische Schrift und Hintergründe

Ein Chrom-Texteffekt funktioniert, weil poliertes Metall kaum eine eigene Farbe hat: Es spiegelt seine Umgebung. Auf einem glänzenden Buchstaben siehst du in der oberen Hälfte einen blassen Himmel, quer durch die Mitte einen scharfen dunklen Horizont und einen Boden, der zum unteren Rand hin wieder aufhellt. Packe diese Bänder in einen Verlauf mit hartem Bruch am Horizont, beschneide ihn auf kräftige Schrift, und du hast Chrom. Ein glatter grauer Übergang, was die meisten zuerst versuchen, sieht einfach nur grau aus.

Wie Chrom Licht spiegelt

Stell dir eine Chromstoßstange im Freien vor. Die obere Wölbung spiegelt den Himmel, sie ist also blass und oft leicht bläulich. Wo sich die Fläche zum Boden dreht, springt die Spiegelung abrupt auf die dunkle Landschaft: Das ist die Horizontlinie, und sie ist das wichtigste Einzeldetail. Darunter hellt die Bodenspiegelung auf, während die Wölbung wieder nach oben dreht, und endet in einem hellen Randglanzlicht.

• Himmelsband: blass, kühl, nach oben heller werdend.
• Horizont: ein harter Sprung von Hell zu Dunkel knapp unter der Mitte. Kein weicher Übergang.
• Bodenband: dunkel am Horizont, nach unten wärmer oder heller werdend.
• Randglanzlicht: eine dünne helle Linie nahe dem unteren Rand.
• Kontur: ein dunkler Rand um jeden Buchstaben trennt das Metall vom Hintergrund.

Chrom-Verläufe zum Kopieren

Die getönten Versionen machen Chrom interessant. Ein blauer Himmel ergibt den klassischen Autoemblem-Look, Rosa und Violett schieben es ins Y2K, das stark auf Flüssigchrom setzte. Y2K-Ästhetik behandelt diese Ära, und Silberverlauf hat weichere, satinierte Metalle, wenn Spiegelchrom zu viel ist.

Chromtext in CSS

Die Technik ist Verlaufstext: Male einen Verlauf als Hintergrund des Elements, beschneide ihn auf die Buchstabenformen und mache die Textfüllung transparent. Ein harter versetzter Schatten, mit filter statt text-shadow angewendet, damit er hinter dem beschnittenen Verlauf liegt, gibt den Buchstaben Gewicht. Verlaufstext erklärt die Methode und ihre Browser-Unterstützung ausführlicher.

.chrome {
  font-family: "Rubik Mono One", system-ui, sans-serif;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  color: #a9b4c2; /* fallback where clipping is unsupported */
  background: linear-gradient(
    180deg,
    #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%,
    #2a2e36 49%, #4a4f59 62%,
    #b9bec6 86%, #f4f6f8 92%, #7d838d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #1b1e24;
  filter: drop-shadow(0 4px 0 #1b1e24);
}

Chromtext in einer Design-App

1. 1

   Setze zuerst das Wort

   Tippe ein kurzes Wort in kräftiger Display-Schrift in großer Größe. Wandle es nur dann in Pfade um, wenn deine App Live-Text nicht mit einem Verlauf füllen kann.

2. 2

   Wende eine senkrechte Verlaufsfüllung an

   Nutze die Stopps aus Klassisches Chrom oben. Achte darauf, dass der Verlauf von der Oberkante der Buchstaben zur Unterkante läuft, nicht über die ganze Arbeitsfläche.

3. 3

   Schärfe den Horizont

   Ziehe die hellen und dunklen Stopps in der Mitte fast übereinander. Wirkt es noch weich, rücke sie näher zusammen.

4. 4

   Füge Rand und Gewicht hinzu

   Eine dunkle Kontur von ein oder zwei Pixeln, dann ein harter Schatten, gerade nach unten versetzt. Lass weiche Schatten und äußeres Leuchten weg.

Schriften, die zu Chrom passen

Chrom braucht Fläche. Dünne Striche haben keinen Platz für Himmel, Horizont und Boden, der Effekt fällt dann zu einer grauen Linie zusammen. Wähle kräftige, breite, idealerweise runde oder facettenfreundliche Schriften und setze sie groß.

Für mehr Optionen listet Display-Schriften kräftige Schriften nach Stimmung, und Retro-Texteffekt kombiniert Chrom mit Konturen und Extrusion für die volle Achtziger-Behandlung.

Chrom richtig hinbekommen

Nutze Chrom für ein Wort oder einen kurzen Titel, nie für einen Absatz. Es ist eine Überschriftenbehandlung für Albumcover, Eventplakate, Merch, Gaming-Kanäle und nostalgische Kampagnen. Auf unruhigem Hintergrund verschwindet es, gib ihm also eine ruhige, dunklere Fläche.

In Gradiently geben Schriftbehandlungen wie Extrusion, Innenlinie und Kontur Überschriften Tiefe, eine Gravurlinie oder eine Kontur auf einem lebendigen Mark, was zu metallischen Looks gut passt, und der Mark hält seinen ruhigsten Bereich hinter den Worten, sodass ein glänzender Titel nie gegen einen unruhigen Hintergrund kämpft. Für irisierenden Glanz statt Spiegelmetall siehe holografischer Verlauf.