# Goldverlauf: Codes für Metallic-Gold, das echt aussieht [Canonical HTML page](https://gradiently.design/de/guide/gold-gradient-design) Das meiste digitale Gold sieht aus wie Orangensaft oder Senf. Echtes Gold besteht überwiegend aus braunem Schatten, etwas Ocker und einem hellen Lichtblitz. Hier sind Codes, die es richtig machen, und die Gründe, warum sie funktionieren. ## The short version - Ein realistischer Goldverlauf läuft von einem tiefbraunen Schatten über einen gedämpften Ocker-Mittelton zu einem hellen Cremelicht und dann zurück zum Schatten. - Gold wirkt orange, wenn seine Farben zu gesättigt und zu rot sind, und wie flaches Gelb, wenn ihm ein dunkler Schatten und ein fast weißes Glanzlicht fehlen. - Metallic-Gold lebt vom Kontrast: Der dunkelste und der hellste Stopp sollten in der Helligkeit weit auseinanderliegen, das Glanzlicht bleibt schmal. - In CSS ist Goldtext ein linearer Goldverlauf, mit background-clip: text auf die Buchstaben beschnitten. - Gold wirkt am kostbarsten, wenn es sparsam eingesetzt wird, auf dunklem Grund wie Schwarz, Marine oder tiefem Grün. Ein **Goldverlauf** wirkt wie echtes Metall, wenn er einen weiten Helligkeitsbereich abdeckt: ein tiefbrauner Schatten, eine gedämpfte Ocker-Mitte, ein schmales helles Cremelicht und wieder hinab zu Braun. Der klassische Code zum Starten ist `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`. Die meisten Goldverläufe scheitern, weil sie zwei grelle Gelb- und Orangetöne ohne echten Schatten oder Glanzlicht nutzen, was wie orange Farbe statt wie Metall wirkt. ## Goldverlauf-Codes zum Kopieren - Klassisches Gold: `linear-gradient(135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100%)` - Champagnergold: `linear-gradient(135deg, #6b5534 0%, #c2a878 25%, #f6ecd2 48%, #cdb486 62%, #85704a 100%)` - Roségold: `linear-gradient(135deg, #6e3f33 0%, #b97a68 25%, #f2cdbf 48%, #c48876 62%, #7e4b3d 100%)` - Antikgold: `linear-gradient(135deg, #2f2210 0%, #7a5c26 30%, #c4a25a 50%, #8a6a2e 68%, #3e2c12 100%)` - Helle Goldfolie: `linear-gradient(180deg, #6b4a0f 0%, #d4a73e 30%, #fff1b8 46%, #e0b44c 54%, #8c6216 85%, #5a3d0c 100%)` - Goldlicht auf Schwarz: `radial-gradient(ellipse at 70% 25%, #e8c877 0%, #9c7428 22%, #3a2a10 50%, #0d0b08 85%)` Sechs Goldtöne, jeder mit dunklem Schatten und schmalem hellem Glanzlicht. Die ersten fünf sind für Schrift, Ränder und Formen, der letzte ist ein Hintergrund. - Bronzeschatten: #5c3d12 - Tiefer Ocker: #7a5418 - Altgold: #b8862b - Metallic-Gold: #c79a3c - Helles Glanzlicht: #f3dc9a - Spekulares Creme: #fff6dc Die Goldfarbcodes hinter Klassisches Gold, vom Schatten zum Glanzlicht, plus ein spekulares Creme, das nur als schmaler Streifen genutzt werden sollte, wenn überhaupt. ## Warum dein Goldverlauf orange aussieht Auf Bildschirmen ist Gold eine Illusion aus Kontrast. Es gibt keinen goldenen Pixel, nur Braun- und Gelbtöne, die so angeordnet sind, dass das Auge eine reflektierende Fläche sieht. Wenn etwas schiefgeht, dann meist auf eine von vier Arten. | Es wirkt | Warum | Lösung | | --- | --- | --- | | Orange | Mitteltöne zu rot und zu gesättigt | Farbtöne Richtung gelber Ocker verschieben und Sättigung senken | | Flach gelb | Kein dunkler Schatten, kein helles Glanzlicht | Einen braunen Stopp nahe den Enden und einen Creme-Stopp in der Mitte hinzufügen | | Braun oder matschig | Glanzlicht zu dunkel, zu viele matte Stopps | Das Glanzlicht nahe an Creme heben und die dunklen Zonen verschmälern | | Grünlich | Gelbtöne zu kühl, Schatten zu grau | Schatten zu Braun statt zu Oliv oder Grau wärmen | Die vier klassischen Goldfehler und wie du jeden behebst. Das Orange-Problem ist das häufigste, weil das Gelb, das du in einer Farbauswahl wählst, oft zu blass wirkt und man es deshalb wärmer macht. Widerstehe: Halte den Mittelton-Farbton etwa bei Ocker, ungefähr dort, wo Gelb auf Braun trifft, und lass den Kontrast den Glanz liefern. Wenn du eigentlich einen schlichten warmen Übergang willst, behandeln [Gelbverlauf](https://gradiently.design/de/guide/yellow-gradient) und [Orangeverlauf](https://gradiently.design/de/guide/orange-gradient) diese direkt. ## So leuchtest du Gold, damit es echt wirkt 1. **Beginne beim Schatten** Wähle ein tiefes, warmes Braun. Es sollte dunkel genug sein, dass weißer Text darauf lesbar wäre. 2. **Füge einen gedämpften Mittelton hinzu** Ein Ocker-Gold, leicht entsättigt. Das ist die Farbe, an die man sich erinnert, deshalb sitzt der größte Teil der Fläche hier. 3. **Setze ein schmales Glanzlicht** Ein helles Creme in einem dünnen Band, außermittig. Je schmaler es ist, desto glänzender wirkt das Metall. 4. **Kehre zum Schatten zurück** Falle nach dem Glanzlicht auf einen dunkleren Ocker zurück, damit das Licht wie eine Spiegelung auf gewölbter Fläche wirkt. 5. **Füge ein zweites, schwächeres Glanzlicht hinzu** Optional: eine weichere Aufhellung nahe dem anderen Ende, als finge ein zweites Licht die Kante. Sie lässt flache Formen gerundet wirken. Gold spiegelt wie jedes polierte Metall, deshalb gilt dieselbe Logik wie beim [Chrom-Texteffekt](https://gradiently.design/de/guide/chrome-effect), nur wärmer und mit weicheren Übergängen. Goldverläufe mit langen, feinen Abschnitten können nach der Kompression Banding zeigen. [Gradient Banding](https://gradiently.design/de/guide/gradient-banding) erklärt, wie feines Korn es verhindert. ## Goldtext in CSS ```css .gold { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: clamp(2.5rem, 8vw, 6rem); color: #c79a3c; /* fallback */ background: linear-gradient( 135deg, #5c3d12 0%, #b8862b 22%, #f3dc9a 45%, #c79a3c 58%, #7a5418 80%, #d6b062 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gold-rule { height: 2px; border: 0; background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent); } ``` Goldene Überschrift und eine dünne goldene Trennlinie. Die Ersatzfarbe erscheint überall dort, wo das Beschneiden des Verlaufs nicht unterstützt wird. Goldverläufe passen zu Serifen und kontrastreicher Schrift in großen Größen. Unterhalb von etwa 24 Pixeln verschwimmen Schatten und Glanzlicht zu einem gleichmäßigen Braun, setze kleinen Text deshalb in einem einfarbigen Goldton wie `#c79a3c` und prüfe seinen Kontrast zum Hintergrund. [Verlaufstext](https://gradiently.design/de/guide/css-gradient-text) behandelt die Browser-Unterstützung für die Beschneidungstechnik. ## Goldverläufe im Druck Ein Goldverlauf ist ein Bild von Metall, nicht Metall. Im normalen Vierfarbdruck entstehen Braun- und Gelbtöne, die Glanz andeuten, was für Flyer und Plakate in Ordnung ist, aber nie wirklich spiegelnd. Für Einladungen, Visitenkarten und Verpackungen, bei denen echter Glanz zählt, nutzen Druckereien Metallicfarben oder Heißfolienprägung, und du lieferst die Goldfläche als separate flache Form im Entwurf. Wenn du einen Verlauf doch druckst, rechne damit, dass er etwas dunkler und weniger lebhaft herauskommt als auf dem Bildschirm. Hellere das Glanzlicht etwas auf, vermeide sehr lange feine Abschnitte, die Banding zeigen können, und bitte vor einer großen Auflage um einen Probedruck. ## Mit Gold gestalten Gold wirkt kostbar, wenn es selten ist. Ein dünner Rand, ein Monogramm, ein Wort in einer Überschrift, eine Trennlinie: auf dunklem Grund aus Schwarz, Marine, Ochsenblut oder tiefem Grün. Bedecke ein ganzes Plakat mit Gold, und es wird messingartig. [Schwarz-Gold-Verlauf](https://gradiently.design/de/guide/black-and-gold-gradient) hat Kombinationen für die klassischste Paarung, und [Luxus Branding](https://gradiently.design/de/guide/luxury-design) zeigt, wie Gold in eine zurückhaltende Identität passt. Eine Galaeinladung im Hochformat auf dunklem Hintergrund mit warmem Goldlicht und cremefarbener Schrift Eine Einladung im Format 5×7 Zoll: dunkler Grund mit warmem Metalllicht und Worten in ruhigem Creme. Ein Schmuck-Post im Hochformat mit kurzer Zeile auf tiefer Fläche, von Goldlicht berührt Ein Schmuck-Post, in dem Gold nur als Licht auf der Fläche erscheint, nie als große flache Füllung. Für einen warmen Look, der hinter jedem Design lebt, statt jedes Mal neu gebaut zu werden, durchsuche den Markt von Gradiently mit Farbwörtern wie „warmes Gold“ oder „Bronze“. Jeder Mark ist ein lebendiger Hintergrund mit Licht und Korn, der immer nur eine Besitzerin oder einen Besitzer haben kann und seinen ruhigsten Bereich in jeder Größe hinter deinen Worten hält. ## FAQ ### Was ist der beste Goldverlauf-Code? Ein guter Startpunkt ist `linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418)`: brauner Schatten, Ocker-Mittelton, helles Glanzlicht und zurück zum Schatten. ### Welche Hex-Codes ergeben ein Metallic-Gold? Kombiniere ein dunkles Bronze wie #5c3d12, ein Altgold wie #b8862b, ein Metallic-Gold wie #c79a3c und ein helles Glanzlicht wie #f3dc9a. ### Warum sieht mein Goldverlauf orange aus? Die Mitteltöne sind zu rot und gesättigt. Verschiebe sie Richtung gelber Ocker, senke die Sättigung und füge für Kontrast einen dunkelbraunen Schatten und ein helles Cremelicht hinzu. ### Wie mache ich Goldtext in CSS? Wende einen linearen Goldverlauf als Hintergrund an und nutze dann `background-clip: text` und `-webkit-text-fill-color: transparent`, mit einer einfarbigen goldenen `color` als Ersatz. ### Welche Farbe passt am besten zu Gold? Schwarz, Marine, tiefes Grün, Ochsenblut und warmes Creme. Dunkle Gründe lassen Gold am hellsten und kostbarsten wirken.