# Chrom-Texteffekt: metallische Schrift und Hintergründe [Canonical HTML page](https://gradiently.design/de/guide/chrome-effect) Chrom ist nicht grau. Es ist ein Spiegel der Welt ringsum, gequetscht auf die Oberfläche eines Buchstabens. Hast du das verstanden, braucht überzeugende Chromschrift einen Verlauf und ein paar Minuten. ## The short version - Ein Chrom-Texteffekt imitiert poliertes Metall, das seine Umgebung spiegelt, statt eine eigene Farbe zu haben. - Überzeugende Chrom-Verläufe zeigen einen hellen Himmel über einer scharfen Horizontlinie und dunklen Boden darunter, mit einem helleren Glanzlicht nahe dem unteren Rand. - In CSS ist Chromtext ein linearer Verlauf, mit background-clip: text auf die Buchstaben beschnitten und mit transparenter Textfüllung. - Chrom wirkt am besten auf kräftiger, breiter Display-Schrift in großen Größen und schlecht auf dünnem oder kleinem Text. - Den Himmelsteil des Verlaufs blau, rosa oder violett zu tönen, verwandelt Chrom von industriell zu Retro oder Y2K. 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 - Klassisches Chrom: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)` - Himmelschrom: `linear-gradient(180deg, #f2f8ff 0%, #b8d4f2 25%, #6d93c4 48%, #1d2533 50%, #3b3a45 64%, #c9b8a8 88%, #fff4e6 94%, #8a7f78 100%)` - Y2K-Flüssigchrom: `linear-gradient(180deg, #fdf2ff 0%, #e4c6f5 22%, #9fb7f0 48%, #2b2142 49%, #4c3a6b 62%, #f0a8d0 86%, #fff0f8 92%, #8a6f9a 100%)` - Dunkles Chrom: `linear-gradient(180deg, #9aa3ad 0%, #5d6670 49%, #0d0f12 50%, #1c2026 70%, #6e7782 92%, #2a2f36 100%)` - Chromscheibe als Hintergrund: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)` Vier Schriftverläufe und ein Hintergrund. Beachte den fast sprunghaften Wechsel in jedem Schriftverlauf bei etwa 48 bis 50 %: Dieser harte Horizont wirkt als Metall. 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](https://gradiently.design/de/guide/y2k-aesthetic) behandelt diese Ära, und [Silberverlauf](https://gradiently.design/de/guide/silver-gradient) 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](https://gradiently.design/de/guide/css-gradient-text) erklärt die Methode und ihre Browser-Unterstützung ausführlicher. ```css .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); } ``` Klassische Chromschrift. Der Verlauf spannt sich über die Zeilenbox, halte `line-height` also bei 1, sonst wandert der Horizont aus der Mitte der Buchstaben. ## Chromtext in einer Design-App 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. **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. **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. **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ß. | Schrift | Charakter | Am besten für | | --- | --- | --- | | Rubik Mono One | Kräftig, breit, runde Ecken | Logos, einzelne Worte | | Bungee | Beschilderung, blockig, aufrecht | Plakate, Eventtitel | | Michroma | Breit, technisch, futuristisch | Tech und Motorsport | | Monoton | Inline-Neon-Stil, Retro | Achtziger- und Disco-Looks | Vier kostenlose Display-Schriften bei Google Fonts, die einen Chrom-Verlauf gut tragen. Alle sind Display-Schriften: Nutze sie nie für Fließtext. Für mehr Optionen listet [Display-Schriften](https://gradiently.design/de/guide/display-fonts) kräftige Schriften nach Stimmung, und [Retro-Texteffekt](https://gradiently.design/de/guide/retro-text-effect) kombiniert Chrom mit Konturen und Extrusion für die volle Achtziger-Behandlung. ## Chrom richtig hinbekommen ### Wirkt unecht - Ein glatter Übergang von Hellgrau zu Dunkelgrau - Horizont ganz oben oder ganz unten - Chrom auf dünnem oder kleinem Text - Keine Kontur, sodass Buchstaben im Hintergrund verschwimmen - Weiche Leuchthöfe um die Buchstaben ### Wirkt wie Metall - Ein harter Horizontsprung knapp unter der Mitte - Heller Himmel oben, dunkler Boden unten - Kräftige Display-Schrift in Überschriftengröße - Eine dünne dunkle Kontur und ein harter versetzter Schatten - Ein schlichter dunkler oder verlaufender Hintergrund mit Raum ums Wort 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. Ein quadratisches Albumcover mit dem einzelnen Wort TURBO in kräftigen Versalien auf dunkler Fläche Ein kräftiges Wort auf dunkler Fläche: die Umgebung, die Chromschrift braucht, um als Metall zu wirken. Eine vertikale Clubnacht-Story mit dem Titel Nachtfahrt und einer kurzen schlichten Detailzeile darunter Eine vertikale Story, in der ein kurzer Titel den Glanz trägt und das Detail schlicht und lesbar bleibt. 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](https://gradiently.design/de/guide/holographic-gradients). ## FAQ ### Wie mache ich einen Chrom-Texteffekt? Nutze einen senkrechten Verlauf mit blassem Himmelsband, hartem dunklem Horizont knapp unter der Mitte und hellerem Bodenband, beschneide ihn dann auf kräftige Schrift und füge eine dünne dunkle Kontur hinzu. ### Wie mache ich Chromtext in CSS? Setze einen linearen Chrom-Verlauf als Hintergrund und nutze dann `background-clip: text` mit `-webkit-text-fill-color: transparent`. Füge `filter: drop-shadow()` für einen harten versetzten Schatten hinzu. ### Welche Farben ergeben einen Chrom-Verlauf? Fast Weiß, blasses Blaugrau, ein sehr dunkles Anthrazit am Horizont, mittleres Grau und ein helles Glanzlicht nahe dem unteren Rand. Töne den Himmel blau, rosa oder violett für Retro-Versionen. ### Welche Schriften funktionieren am besten für Chromtext? Kräftige, breite Display-Schriften wie Rubik Mono One, Bungee oder Michroma, groß gesetzt. Dünne Schriften haben keinen Platz, damit die Spiegelung zur Geltung kommt. ### Was ist der Unterschied zwischen Chrom und Silber? Chrom ist ein Spiegel mit scharfer Horizontspiegelung und starkem Kontrast. Silber im Design ist meist weicher und satiniert, mit sanfteren Übergängen.