# Grauer Farbverlauf: neutrale Codes, die nicht langweilen

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

Grau ist die Farbe, die man wählt, wenn man sich nicht entscheiden will. Getönt, beleuchtet und mit einem Akzent kombiniert, wird es zu einem der selbstbewusstesten Hintergründe überhaupt.

## The short version

- Ein grauer Farbverlauf wirkt durchdacht, wenn seine Grautöne einen leichten Stich haben, entweder kühl zu Blau oder warm zu Braun.
- Warme und kühle Grautöne in einem Verlauf zu mischen lässt ihn schmutzig wirken, wähle also eine Temperatur und bleib dabei.
- Metallische Grautöne entstehen durch ein scharfes, helles Band zwischen dunkleren Stopps, das Licht auf einer Fläche nachahmt.
- Graue Verläufe zeigen Banding deutlicher als bunte, und eine feine Körnungsschicht ist die übliche Lösung.
- Eine gesättigte Akzentfarbe vor einem grauen Verlauf lässt das ganze Design bewusst wirken.

Ein **grauer Farbverlauf** wirkt nicht mehr langweilig, sobald seine Grautöne getönt sind. Reine Neutralgrautöne, mit gleichen Anteilen Rot, Grün und Blau, wirken flach und digital. Schiebst du sie leicht ins Kühle, Richtung Blau, bekommst du Nebel, Schiefer und Stahl; schiebst du sie ins Warme, Richtung Braun, bekommst du Stein, Beton und Zinn. Füge Licht hinzu, das irgendwoher kommt, und eine Akzentfarbe, und Grau wird ruhig, modern und leise selbstbewusst. Codes für jedes folgen.

## Warmes Grau oder kühles Grau: wähle eins

Kühle Grautöne wirken technisch, sauber und präzise. Warme Grautöne wirken architektonisch, natürlich und weich. Beide funktionieren allein wunderbar. Zusammen in einem Verlauf streiten sie, und das Ergebnis sieht aus wie ein Schmierfleck. Sieh dir die Farbfelder unten paarweise an: Die obere Reihe neigt zu Blau, die untere zu Braun, und der Unterschied ist klein, aber offensichtlich, sobald du ihn gesehen hast.

- Nebel: #f4f6f8
- Kühler Dunst: #aeb6be
- Schiefer: #4a535d
- Sturm: #22272c
- Kreide: #f3f1ee
- Beton: #b5b1ab
- Zinn: #5f5b56
- Graphit: #1c1c1e

Vier kühle und vier warme Grautöne. Graphit liegt nah am Neutralen, weshalb er zu fast allem passt.

## Kühle und warme graue Farbverlauf Codes

Nebel und Schiefer sind das kühle Paar: Nebel für helle, luftige Layouts und Schiefer für ernste dunkle. Sturm fügt eine beleuchtete Wolke hinzu, die einem dunklen Grau echte Tiefe gibt. Stein und Beton sind das warme Paar, näher an Baumaterialien, und Graphit ist das fast Schwarz, das du statt einfachem Schwarz nutzen kannst.

- Nebel: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Schiefer: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Sturm: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Warmer Stein: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Beton: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Graphit: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Sechs Grautöne mit Temperatur. Sturm und Graphit tragen weiße Schrift; Nebel, Stein und Beton wollen dunkle Schrift.

Gehst du noch dunkler, setzen die Codes für den [schwarzen Farbverlauf](https://gradiently.design/de/guide/black-gradient) bei Graphit an. Für Designs aus einem Farbton in vielen Helligkeitsstufen sieh dir den [monochromen Farbverlauf](https://gradiently.design/de/guide/monochrome-gradient) an.

## Silber, Stahl und andere metallische graue Verläufe

Metall ist keine Farbe, es ist eine Spiegelung. Ein **Silber Farbverlauf** funktioniert durch ein scharfes, helles Band zwischen dunkleren Stopps, so wie Licht eine gewölbte Fläche trifft. Gunmetal nutzt denselben Trick eine Stufe dunkler, und gebürsteter Stahl fügt feine parallele Linien hinzu. Sie sind kräftig, nutze sie also für ein Abzeichen, eine Überschriftenplatte oder ein einzelnes Feld statt für eine ganze Seite.

- Poliertes Silber: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Gunmetal: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Zinn: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Gebürstete Stahllinien: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Metallische Grautöne. Je enger das helle Band, desto glänzender wirkt das Metall; ziehst du es breit, wird es seidenmatt.

Gebürsteter Stahl wirkt am besten, wenn die Linien über einem weichen beleuchteten Verlauf liegen statt allein. Zwei Ebenen reichen:

```css
.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}
```

Feine weiße Linien alle drei Pixel über einer beleuchteten Silbermischung. Ändere den Winkel der zweiten Ebene, um zu verschieben, wo das Licht fällt.

## Grau plus eine Farbe

Wenige Hintergründe setzen eine einzelne kräftige Farbe so gut in Szene wie Grau. Der Akzent wirkt vor Neutral heller als vor jeder anderen Farbe, ein wenig geht also weit: ein Wort, ein Button, eine Zeile. Wähle den Akzent nach Branche und Stimmung.

| Akzent | Hex | Wirkt als | Gut für |
| --- | --- | --- | --- |
| Elektroblau | `#3b82f6` | Technisch, vertrauenswürdig | Software, Fintech, Daten |
| Signalorange | `#f97316` | Industriell, energiegeladen | Bau, Werkzeuge, Logistik |
| Limette | `#a3e635` | Sportlich, frisch | Fitness, Laufen, Outdoor-Ausrüstung |
| Zartrosa | `#f2c6c2` | Weich, modisch | Mode, Beauty, Lifestyle |
| Messing | `#c9a24a` | Hochwertig, klassisch | Architektur, Uhren, Hotels |

Nutze kühle Grautöne mit Blau und Limette, warme Grautöne mit Orange, Zartrosa und Messing.

Komplette Schemata nach diesem Prinzip findest du unter [Tech-Farbpaletten](https://gradiently.design/de/guide/tech-color-palettes) und [neutrale Farbpaletten](https://gradiently.design/de/guide/neutral-color-palettes).

## Grau, das bewusst wirkt

### Wirkt unfertig

- Reine Neutralgrautöne ohne Tönung
- Warme und kühle Grautöne in einer Mischung
- Sichtbare Streifen auf einer glatten Fläche
- Drei oder vier Akzentfarben
- Mittelgraue Schrift auf mittelgrauem Hintergrund

### Wirkt bewusst

- Ein leichter Blau- oder Braunstich durchgehend
- Eine Temperatur von Anfang bis Ende
- Eine feine Körnung über dem ganzen Verlauf
- Ein Akzent, sparsam eingesetzt
- Fast weiße oder fast schwarze Schrift, nie Mittelgrau

Banding verdient eine eigene Warnung. Grautöne haben keinen Farbton, der das Auge ablenkt, deshalb ist jede Stufe in einem glatten Verlauf sichtbar, besonders auf großen Bildschirmen und nach Kompression. Eine leichte Rauschschicht verbirgt es; [CSS-Rauschtextur](https://gradiently.design/de/guide/css-noise-texture) hat ein Snippet, und [Verlaufs-Banding](https://gradiently.design/de/guide/gradient-banding) erklärt, warum es passiert.

## Graue Verläufe auf Websites und im Dark Mode

Im Web leisten graue Verläufe ihre beste Arbeit leise. Ein Nebel-Verlauf hinter einem Funktionsabschnitt trennt ihn ohne harte Kante von einer weißen Seite. Im Dark Mode gibt ein Graphit-Verlauf, der zur Oberkante einer Karte leicht aufhellt, ihr Tiefe, wo ein flaches Grau wie ein Loch wirken würde. Halte den Unterschied zwischen den Stopps klein, wenige Prozent Helligkeit, damit der Verlauf als Licht gelesen wird statt als Dekoration. [Dark Mode Design](https://gradiently.design/de/guide/dark-mode-design) behandelt die weiteren Regeln für dunkle Oberflächen, von Flächenfarben bis Kontrast.

## Graue Farbverlauf Hintergründe in der Praxis

Architekten, Ingenieurbüros und Softwarefirmen nutzen Grau, weil es die Arbeit sprechen lässt. Ein Schiefer-Verlauf mit weißer Schrift und einem blauen Akzent lässt eine Projektankündigung präzise wirken; ein warmer Stein-Verlauf mit Graphit-Schrift lässt ein Portfolio-Cover haptisch wirken. [Branding für Architekturbüros](https://gradiently.design/de/guide/architecture-firm-branding) zeigt, wie weit eine zurückhaltende Palette tragen kann.

Ein breites LinkedIn-Bild mit kühlem schiefergrauem Verlaufshintergrund und den Worten Gebaut für die Ewigkeit in Weiß

Ein LinkedIn-Linkbild auf einem Schiefer-Mark. Weiße Schrift auf der dunkleren Seite; die beleuchtete Fläche bleibt frei von Worten.

Bei dezenten Hintergründen zahlt sich ein Designsystem aus. In Gradiently trägt ein grauer Mark seine eigene Körnung, die Banding fernhält, und Automatische Farbe wählt Zeile für Zeile helle oder dunkle Schrift, während sich das Grau über das Bild verschiebt.

## FAQ

### Wie mache ich einen grauen Farbverlauf weniger langweilig?

Töne die Grautöne leicht kühl oder warm, beleuchte den Verlauf von einer Seite, füge feine Körnung hinzu und nutze eine gesättigte Akzentfarbe.

### Wie lautet das CSS für einen Silber Farbverlauf?

Nutze ein helles Band zwischen dunkleren Stopps, zum Beispiel `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### Heißt es grau oder gray Farbverlauf?

Im Deutschen heißt es grau; „gray“ ist die amerikanische und „grey“ die britische englische Schreibweise. Alle meinen genau dieselbe Farbe.

### Welche Farbe passt am besten zu einem grauen Farbverlauf?

Ein starker Akzent: Elektroblau oder Limette bei kühlen Grautönen, Signalorange, Zartrosa oder Messing bei warmen.

### Warum hat mein grauer Farbverlauf Streifen?

Glatte graue Mischungen zeigen jede Farbstufe, besonders nach Kompression. Füge eine leichte Rauschschicht hinzu und exportiere als PNG.