Farbverlauf-Winkel und Richtung: wohin er laufen sollte

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

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

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.

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.

/* 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); }

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.

Eine Richtung wählen, Schritt für Schritt

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

   Die Neigung passend zur Stimmung wählen

   Senkrecht für Ruhe, diagonal für Energie, waagerecht für Fortschritt.

4. 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. Zu anderen Formen, die gar keine einzelne Richtung haben, siehe Arten von Farbverläufen. 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.