# Silberverlauf: Metallic-Codes und wie du sie ausleuchtest

[Canonical HTML page](https://gradiently.design/de/guide/silver-gradient)

Den Unterschied zwischen Silber und schlichtem Grau macht das Licht. Hier sind sechs Silberverläufe zum Kopieren, die vier Regeln, die sie wie Metall wirken lassen, und CSS für Text, Buttons und gebürstete Flächen.

## The short version

- Ein Silberverlauf wirkt wie Metall statt wie Grau, wenn er einen leicht kühlen Stich, eine weite Spanne von Dunkel bis Hell und ein schmales helles Glanzlicht verbindet.
- Poliertes Silber hat harte Übergänge und starken Kontrast, mattes Silber weiche Übergänge, und gebürstetes Silber fügt feine parallele Linien hinzu.
- Reine neutrale Grautöne wirken meist flach und staubig, deshalb neigen die meisten überzeugenden Silbertöne sehr leicht zu Blau oder, bei Platin und Zinn, sehr leicht ins Warme.
- Lange, feine Grauverläufe neigen besonders zu Banding, das eine feine Kornschicht versteckt.
- Silberverläufe funktionieren am besten auf Schrift, Rändern, Buttons und kleinen Formen vor dunklem Grund.

Ein **Silberverlauf** wirkt wie Metall, wenn er drei Dinge hat, die schlichtem Grau fehlen: einen schwachen kühlen Stich, einen großen Sprung zwischen dem dunkelsten und dem hellsten Stopp und ein Glanzlicht, das schmal statt ausgebreitet ist. Ein verlässlicher Startcode ist `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Unten findest du sechs Silbertöne zum Kopieren, die Lichtregeln dahinter und CSS für Silbertext, Buttons und gebürstetes Metall.

## Silberverlauf-Codes

- Poliertes Silber: `linear-gradient(135deg, #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%, #a7afb9 58%, #4b525c 82%, #9aa2ac 100%)`
- Mattes Silber: `linear-gradient(160deg, #8d939b 0%, #c3c8ce 35%, #e4e7ea 55%, #b5bbc2 75%, #8a9098 100%)`
- Gebürstetes Silber: `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`
- Kühles Platin: `linear-gradient(135deg, #6f7680 0%, #d6dce4 30%, #fbfdff 45%, #b9c3cf 60%, #56606c 100%)`
- Warmes Zinn: `linear-gradient(135deg, #4f4c48 0%, #a39f99 30%, #e3e0da 46%, #9b968f 62%, #4a4743 100%)`
- Silberlicht auf Schwarz: `radial-gradient(ellipse at 30% 20%, #e9edf1 0%, #8f97a1 22%, #2b3038 52%, #0c0e11 85%)`

Sechs Silbertöne: vier für Schrift, Ränder und Formen, eine gebürstete Fläche und ein Hintergrund. Jeder hat einen dunklen Stopp und ein fast weißes Glanzlicht.

- Schattenstahl: #4b525c
- Metallgrau: #5f6670
- Silber: #a7afb9
- Helles Silber: #c9cfd6
- Glanzlicht: #f7f9fb

Die Silberfarbcodes hinter Poliertes Silber. Jeder neigt leicht zu Blau, weshalb sie wie Metall statt wie Beton wirken.

## So leuchtest du einen Silberverlauf aus

Silber zeigt wie jedes polierte Metall überwiegend reflektiertes Licht. Dein Verlauf ist eine gemalte Spiegelung, denke also darüber nach, woher das Licht kommt und wie scharf die Fläche es einfängt.

1. **Töne die Grautöne leicht kühl** Gib jedem Stopp einen Hauch Blau, gerade genug, dass das Grau nicht mehr wie Staub oder Zement aussieht.
2. **Geh dunkler, als es sich richtig anfühlt** Metall braucht einen tiefen Schatten. Dein dunkelster Stopp sollte ein Metallgrau sein, kein mittleres Grau.
3. **Halte das Glanzlicht schmal** Ein fast weißes Band über einem kleinen Teil des Verlaufs wirkt als Glanz. Eine breite helle Fläche wirkt wie eine blassgraue Oberfläche.
4. **Entscheide dich für poliert oder matt** Rücke Stopps eng zusammen für poliertes Silber mit knackigen Spiegelungen, ziehe sie auseinander für ein weiches, mattes Finish.

Treibe den Kontrast ganz hoch, mit einer harten Horizontlinie durch die Mitte, und Silber wird zu Spiegelchrom. Der [Chrom-Texteffekt](https://gradiently.design/de/guide/chrome-effect) behandelt diese Version. Für ein warmes Metall nach derselben Logik siehe [Goldverlauf](https://gradiently.design/de/guide/gold-gradient-design).

## Silber im Vergleich zu schlichtem Grau

### Wirkt grau

- Perfekt neutrale Grautöne
- Zwei Stopps, Hellgrau zu Mittelgrau
- Nur gleichmäßige, sanfte Übergänge
- Eine breite blasse Fläche ohne klares Glanzlicht
- Große flache Silberflächen auf weißer Seite

### Wirkt silbern

- Grautöne mit schwachem kühlem oder warmem Stich
- Fünf oder sechs Stopps, Metallgrau bis fast Weiß
- Eine schärfere Spiegelung irgendwo
- Ein schmales, helles Glanzlicht außermittig
- Silberne Details auf dunklem Grund

Wenn du eigentlich eine ruhige neutrale Fläche statt Metall willst, ist das eine andere Aufgabe: [Grauverlauf](https://gradiently.design/de/guide/grey-gradient) und [monochromer Verlauf](https://gradiently.design/de/guide/monochrome-gradient) behandeln weiche, tonale Grautöne für Hintergründe.

## Welches Silber-Finish du nutzen solltest

Jedes Finish sagt etwas leicht anderes, wähle es also für die Aufgabe, nicht aus Gewohnheit. Eine Marke kann gut zwei nutzen, etwa poliertes Silber für ein Logo und gebürstetes Silber für Verpackungsflächen, solange der Stich gleich bleibt.

| Finish | So sieht es aus | Einsatz |
| --- | --- | --- |
| Poliert | Knackige Spiegelungen, starker Kontrast, ein helles schmales Glanzlicht | Logos, Überschriften, Award-Grafiken |
| Matt | Weiche Übergänge, sanfter Schimmer, wenig Kontrast | Große Flächen, Verpackung, ruhige Hintergründe |
| Gebürstet | Feine parallele Linien unter weichem Schimmer | Paneele, Produktseiten, technische Marken |
| Platin | Kühles, helles, fast weißes Glanzlicht | Premium-Stufen, Jubiläen, Schmuck |
| Zinn | Dunkler, wärmer, weicher | Tradition, Handwerk, Herrenmode |

Fünf Silber-Finishes und wohin jedes gehört. Alle beruhen auf denselben Lichtregeln, nur Kontrast, Stich und Stopp-Abstand ändern sich.

## Silbertext und Buttons in CSS

```css
.silver-text {
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 6rem);
  color: #a7afb9; /* fallback */
  background: linear-gradient(
    135deg,
    #5f6670 0%, #c9cfd6 28%, #f7f9fb 44%,
    #a7afb9 58%, #4b525c 82%, #9aa2ac 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.silver-button {
  padding: 0.85rem 1.6rem;
  border: 1px solid #4b525c;
  border-radius: 999px;
  color: #1c2026;
  font-weight: 600;
  background: linear-gradient(180deg, #f7f9fb 0%, #c9cfd6 48%, #a7afb9 52%, #d9dee3 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgb(0 0 0 / 0.25);
  cursor: pointer;
}

.silver-button:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d6dbe0 48%, #b3bac3 52%, #e3e7eb 100%);
}

.brushed {
  background:
    repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px);
}
```

Silberne Überschrift, ein Pillen-Button mit geteilter Spiegelung und ein gebürstetes Metallpaneel. Der dunkle Text des Buttons hält sein Label lesbar.

Der Button nutzt einen Sprung in der Mitte, von 48 % bis 52 %, der wie ein Horizont in einer gewölbten Fläche wirkt. [CSS-Verlaufs-Button](https://gradiently.design/de/guide/css-gradient-button) hat weitere Button-Muster, und [Verlaufstext](https://gradiently.design/de/guide/css-gradient-text) erklärt das Beschneiden von Text und die Unterstützung in Browsern.

> **Grautöne zeigen leicht Banding** Lange, feine Grauverläufe sind der Ort, an dem Banding am stärksten auffällt, besonders nachdem eine Plattform dein Bild komprimiert. Füge eine feine Kornschicht hinzu und exportiere in voller Größe als PNG. [Gradient Banding](https://gradiently.design/de/guide/gradient-banding) erklärt, warum.

## Mit Silber gestalten

Silber wirkt modern, kühl und präzise, wo Gold warm und traditionell wirkt. Es passt zu Tech-Launches, Uhren und Schmuck, Jubiläen (Silber ist die traditionelle Zahl für das 25.), Winterkampagnen und allem mit futuristischem Zug. Wie Gold wirkt es in kleinen Dosen auf dunklem Grund am wertvollsten: ein Monogramm, eine dünne Linie, ein einzelner Titel.

Eine Silberjubiläums-Einladung im Hochformat mit kühlem metallischem Licht und den Worten Fünfundzwanzig Jahre

Eine Jubiläumseinladung, bei der kühles, metallisches Licht das Thema trägt und die Worte ruhig bleiben.

Ein Produkt-Post im Hochformat, der eine Stahluhr auf dunklem, kühlem Hintergrund ankündigt

Ein Produkt-Post für eine Uhr: eine dunkle, kühle Fläche mit Silber als Licht, nicht als flache graue Füllung.

Silber passt auch gut zu eisigen Blautönen und tiefem Marine für eine Winterpalette und zu Schwarz und Weiß für einen kargen, redaktionellen Look. [Luxus-Farbpaletten](https://gradiently.design/de/guide/luxury-color-palettes) hat mehrere Kombinationen rund um kühle Metalle. Im Studio von Gradiently wird ein kühler metallischer Mark in jeder Größe live hinter deinen Worten gerendert, und Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift aus der Palette des Mark, sodass Silberflächen lesbar bleiben, ohne dass du jedes Format prüfst.

## FAQ

### Was ist ein guter Silberverlauf-Code?

Probiere `linear-gradient(135deg, #5f6670, #c9cfd6, #f7f9fb, #a7afb9, #4b525c)`. Er läuft von Metallgrau über helles Silber zu einem fast weißen Glanzlicht und zurück.

### Welche Hex-Codes ergeben Metallic-Silber?

Eine Kombination wie #4b525c, #5f6670, #a7afb9, #c9cfd6 und #f7f9fb. Jeder neigt ganz leicht zu Blau, was ihn davor bewahrt, wie schlichtes Grau zu wirken.

### Wie mache ich einen gebürsteten Metalleffekt in CSS?

Nutze einen sich wiederholenden linearen Verlauf mit winzigen Stopps im Abstand von ein bis zwei Pixeln in nahen Grautönen, etwa `repeating-linear-gradient(90deg, #b9bec5 0px, #d3d7dc 1px, #aeb3ba 2px, #c8ccd2 4px)`.

### Warum sieht mein Silberverlauf grau aus?

Wahrscheinlich fehlen Kontrast und ein Glanzlicht. Füge einen dunkleren Metallgrau-Stopp, ein schmales fast weißes Band und einen schwachen kühlen Stich in jeden Stopp hinzu.

### Was ist der Unterschied zwischen Silber- und Platinverläufen?

Im Design ist Platin meist ein etwas kühleres, helleres Silber mit weißerem Glanzlicht, während Zinn ein dunkleres, wärmeres Silbergrau ist.

### Welche Hintergrundfarbe lässt Silber am besten wirken?

Dunkle Gründe wie Schwarz, Anthrazit, tiefes Marine oder Mitternachtsblau. Silber auf Weiß oder blassem Grau verliert sein Glanzlicht und wirkt leicht flach und ausgewaschen.