Silberverlauf: Metallic-Codes und wie du sie ausleuchtest

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

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. 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. 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. 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. 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 behandelt diese Version. Für ein warmes Metall nach derselben Logik siehe Goldverlauf.

Silber im Vergleich zu schlichtem Grau

Wenn du eigentlich eine ruhige neutrale Fläche statt Metall willst, ist das eine andere Aufgabe: Grauverlauf und monochromer Verlauf 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.

Silbertext und Buttons in 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);
}

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 hat weitere Button-Muster, und Verlaufstext erklärt das Beschneiden von Text und die Unterstützung in Browsern.

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.

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 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.