# Farbverlauf-Winkel und Richtung: wohin er laufen sollte

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

Dieselben zwei Farben können ruhig, beflügelnd oder unruhig wirken, nur je nachdem, in welche Richtung sie laufen. So wählst du eine Richtung bewusst und bekommst den Winkel im Code genau richtig.

## The short version

- Der Winkel eines Farbverlaufs bestimmt, woher sein Licht zu kommen scheint und wohin das Auge über ein Design wandert.
- Farbverläufe, die oben heller sind, wirken meist natürlich und ruhig, weil Menschen erwarten, dass Licht von oben kommt.
- Diagonale Farbverläufe wirken energischer als senkrechte oder waagerechte und sind die häufigste Wahl für Hintergründe und Buttons.
- In CSS zeigt 0deg nach oben und Winkel drehen im Uhrzeigersinn, also läuft 90deg von links nach rechts und der Standard ist 180deg, von oben nach unten.
- Eckenschlüsselwörter wie to top right passen sich der Form der Box an, ein fester Winkel wie 45deg nicht.

Der **Winkel eines Farbverlaufs** ist die Richtung, in der sich seine Farben ändern, und er leistet mehr, als die meisten erwarten. Er bestimmt, woher das Licht zu kommen scheint, wo das Auge beginnt und endet und ob das Design ruhig, beflügelnd oder unruhig wirkt. Als Faustregel: Oben heller wirkt natürlich, Diagonalen wirken energisch, und das helle Ende sollte von deinen Wörtern entfernt sitzen. In CSS beginnen Winkel bei `0deg` nach oben und drehen im Uhrzeigersinn.

## Wie die Richtung eines Farbverlaufs die Wirkung ändert

- 180deg: Licht von oben: `linear-gradient(180deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 0deg: Glühen von unten: `linear-gradient(0deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 90deg: von links nach rechts: `linear-gradient(90deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 135deg: Diagonale: `linear-gradient(135deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`

Dieselben drei Farben in vier Richtungen. Nur der Winkel ändert sich, und jeder erzählt eine andere Geschichte.

| Richtung | Wirkung | Gut für |
| --- | --- | --- |
| Oben hell, unten dunkel | Natürlich, ruhig, geerdet, wie Himmel über Land | Hintergründe, Websites, Leseflächen |
| Unten hell, oben dunkel | Glühend, theatralisch, wie Morgengrauen oder eine Bühne | Nachtszenen, Drama, Produktenthüllungen |
| Von links nach rechts | Fortschritt, Zeit, eine Reise | Zeitleisten, Fortschrittsbalken, Banner |
| Diagonal | Energie, Bewegung, Schwung | Posts, Buttons, Cover, Launches |
| Radial von einer Ecke | Ein Spotlight, eine Lichtquelle | Heros, Cover, Fokus auf einen Bereich |

Was jede Richtung tendenziell nahelegt. Von links nach rechts liest sich in Sprachen, die von links nach rechts geschrieben werden, als Fortschritt, in Sprachen von rechts nach links kann es umgekehrt wirken.

## Licht von oben

Menschen gehen meist davon aus, dass Licht von oben kommt, weil es fast immer so ist, von der Sonne oder einer Decke. Ein Farbverlauf, der oben heller ist, passt zu dieser Erwartung und liest sich deshalb natürlich und ruhig: Himmel über Land, eine beleuchtete Wand, ein sanft beleuchtetes Objekt. Drehst du ihn um, sodass das Licht unten liegt, wirken dieselben Farben theatralisch, wie ein Lagerfeuer, eine Bühne oder ein Bildschirm, der im Dunkeln leuchtet. Keines ist falsch, aber das zweite sollte eine Entscheidung sein.

Dieselbe Erwartung wirkt bei Buttons und Karten. Eine Fläche, die oben etwas heller ist, wirkt erhaben, eine, die unten heller ist, wirkt eingedrückt. Das ist gut zu wissen, wenn du einen dezenten Farbverlauf zu einem [Farbverlauf-Button](https://gradiently.design/de/guide/css-gradient-button) hinzufügst.

## Diagonalen und Energie

Diagonale Linien wirken wie Bewegung, weil sie im Vergleich zu Senkrechten und Waagerechten instabil aussehen. Deshalb sind Diagonalen, besonders von links oben nach rechts unten, die häufigste Wahl für Social Posts, Buttons und Launch-Grafiken. Der Start oben links entspricht auch der Stelle, an der Lesende von Sprachen von links nach rechts eine Seite beginnen, sodass das helle Ende sie zuerst begrüßt.

Steilere und flachere Diagonalen ändern die Stimmung. Etwa 100 bis 120 Grad wirken fast senkrecht mit sanfter Neigung, ruhig, aber nicht statisch. Etwa 150 bis 160 Grad wirken wie spätes Licht, das über eine Fläche streift. Ein exaktes 45 oder 135 ist am dynamischsten und auch am häufigsten, ein Grund, etwas leicht anderes zu probieren, wenn du auffallen willst, siehe [zweifarbige Farbverläufe](https://gradiently.design/de/guide/two-color-gradients).

## Halte das Licht von den Wörtern fern

Richtung ist auch Layout. Das helle Ende eines Farbverlaufs zieht das Auge an, setze es also dorthin, wo du Aufmerksamkeit willst, und halte Text am ruhigeren Ende, wo der Kontrast stabiler ist. Eine Überschrift oben auf einem Post passt zu einem Farbverlauf, der nach oben dunkler wird, mit dem Glühen in der unteren Ecke, oder umgekehrt mit dunkler Schrift.

Ein Post im Hochformat, bei dem der hellste Teil des Farbverlaufs hinter der Überschrift sitzt

Landet der hellste Teil des Feldes auf der Überschrift, konkurrieren Wörter und Licht.

Derselbe Post mit dem hellen Teil des Farbverlaufs von der Überschrift weg verschoben

Das Licht von den Wörtern weggerückt: Das Auge wandert weiter, und die Überschrift hält.

## Wie Farbverlaufswinkel in CSS funktionieren

In CSS beschreibt der Winkel eines linearen Farbverlaufs die Richtung, in der die Farben laufen. `0deg` zeigt gerade nach oben, und Winkel drehen im Uhrzeigersinn: `90deg` läuft von links nach rechts, `180deg` von oben nach unten und `270deg` von rechts nach links. Lässt du den Winkel weg, ist der Standard `180deg`. Du kannst auch Schlüsselwörter wie `to right` und `to bottom left` nutzen.

```css
/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }
```

Winkel und Schlüsselwörter. Das letzte Paar unterscheidet sich bei jeder Box, die nicht quadratisch ist.

Der Unterschied im letzten Paar zählt bei Bannern und Stories. Ein fester Winkel wie `45deg` läuft immer mit 45 Grad, egal welche Form. Ein Eckenschlüsselwort wie `to top right` neigt den Winkel passend zur Box, sodass die Farbe der Mitte genau zwischen den anderen beiden Ecken läuft. Bei einem breiten 3:1-Banner ergibt `to top right` etwa `18deg`, viel näher an der Senkrechten als `45deg`, weil die Farbbänder entlang der langen Diagonale liegen müssen. Nutze Schlüsselwörter, wenn der Farbverlauf bei jeder Form von Ecke zu Ecke gehen soll, und Grad, wenn du überall dieselbe Neigung willst.

| Schlüsselwort | Winkel | Laufrichtung |
| --- | --- | --- |
| `to top` | `0deg` | Von unten nach oben |
| `to right` | `90deg` | Von links nach rechts |
| `to bottom` | `180deg` | Von oben nach unten (Standard) |
| `to left` | `270deg` | Von rechts nach links |
| `to bottom right` | `135deg` nur im Quadrat | Von der Ecke links oben zur Ecke rechts unten |

CSS-Schlüsselwörter und ihre Winkel. Eckenschlüsselwörter entsprechen nur bei quadratischer Box einem festen Winkel. Siehe [MDN zu linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

> **Design-Tools zählen anders** Viele Design-Tools messen Winkel von rechts und drehen gegen den Uhrzeigersinn oder nutzen ziehbare Griffe statt Zahlen. Wenn du einen Farbverlauf aus einer Designdatei nach CSS überträgst, prüfe die Richtung nach Augenmaß, statt die Zahl zu kopieren.

## Eine Richtung wählen, Schritt für Schritt

1. **Entscheiden, woher das Licht kommt** Von oben für ruhig und natürlich, von unten für Glühen und Drama, aus einer Ecke für ein Spotlight.
2. **Zuerst die Wörter platzieren** Setze die Überschrift dorthin, wo sie im Layout hingehört, und lass dann den Farbverlauf so laufen, dass sein ruhiges Ende dahinter sitzt.
3. **Die Neigung passend zur Stimmung wählen** Senkrecht für Ruhe, diagonal für Energie, waagerecht für Fortschritt.
4. **Jedes Format prüfen** Eine Richtung, die auf einem Quadrat funktioniert, setzt das Licht auf einer Story oder einem Banner womöglich an die falsche Stelle. Passe pro Größe an, statt zuzuschneiden.

Zum Rest der Syntax linearer Farbverläufe siehe [lineare CSS-Farbverläufe](https://gradiently.design/de/guide/css-linear-gradient). Zu anderen Formen, die gar keine einzelne Richtung haben, siehe [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients). Marks in Gradiently werden für jede Größe gerendert, in der du gestaltest, ihr Licht landet also auf jedem Format an einer sinnvollen Stelle statt dort, wo ein Zuschnitt es liegen lässt.

## FAQ

### Was ist der beste Winkel für einen Farbverlauf?

Es gibt keinen einzelnen besten Winkel. Oben heller wirkt natürlich und ruhig, Diagonalen um 135 Grad wirken energisch, und das helle Ende sollte von deinem Text entfernt sitzen.

### In welche Richtung zeigt 0deg bei einem CSS-Farbverlauf?

Nach oben. `0deg` läuft von unten nach oben, und Winkel drehen im Uhrzeigersinn, also läuft `90deg` von links nach rechts und `180deg` von oben nach unten.

### Was ist die Standardrichtung eines linearen CSS-Farbverlaufs?

Von oben nach unten, dasselbe wie `180deg` oder `to bottom`.

### Ist 45deg dasselbe wie to top right?

Nur in einer quadratischen Box. `to top right` passt sich der Form der Box an, sodass der Farbverlauf von Ecke zu Ecke läuft, während `45deg` bei jeder Form dieselbe Neigung behält.

### Warum steht mein Farbverlauf nach dem Kopieren aus einem Design-Tool auf dem Kopf?

Viele Design-Tools messen Winkel anders als CSS. Prüfe die Richtung visuell und passe den CSS-Winkel an.