CSS-Gradient ohne Stack Overflow – Erstellen Sie sie visuell und veröffentlichen Sie sie

Sie haben eine neue CSS-Datei geöffnet und haben eingegeben background:, und blickten dann auf den Bildschirm. Sie wissen, dass ein Gradient nötig ist. Sie wissen, dass die Eigenschaft ist linear-gradient. Sie können nicht erinnern, ob der Winkel zuerst oder zuletzt kommt, ob die Grade im Uhrzeigersinn oder im Gegenuhrzeigersinn gehen, oder warum die Farben, die Sie eingegeben haben, nichts mit dem, was Sie vorstellten, gemeinsam haben.

Dies ist der Artikel, der das löst. Wir erklären genau, wie CSS-Gradienten funktionieren – die Syntax, die Winkellogik und die Muster, die Sie tatsächlich verwenden – und verlinken Sie zu einem visuellen Generator, damit Sie aufhören zu raten und beginnen können, zu liefern.

Wie linear-gradient tatsächlich funktioniert

Die grundlegende Syntax ist:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Das direction ist das, was Leute verwirrt. Es gibt zwei Optionen: ein Schlüsselwort oder einen Winkel in Grad.

Schlüsselwörter: to top, to bottom (Standard), to left, to right, und die Diagonalen: to top right, to bottom left, usw.

Grad: 0deg zeigt nach oben (gleich wie to top). Der Winkel steigt im Uhrzeigersinn, also zeigt 90deg rechts, 180deg zeigt nach unten, 270deg zeigt nach links.

Hier ist das Stück, das man sich merken sollte: 0deg = nach oben, im Uhrzeigersinn davon aus. Alles andere folgt daraus.

Sechs Muster, die Sie diese Woche verwenden werden

1. Top-to-Bottom (Standard)

background: linear-gradient(to bottom, #667eea, #764ba2);

2. In Transparenz übergehen

Text über einem Bild überlagern? Der Unterteil muss dunkel und der Obergrenze klar sein. Greifen Sie nach transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

Ein einziger Hinweis: Vermeiden Sie transparent in Safari beim Übergang von einer farbigen Werte – es interpoliert durch schwarz. Verwenden Sie stattdessen rgba(r, g, b, 0) mit den gleichen RGB-Werten.

3. Winkeliger Hintergrund für den Helden

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg ist etwa von unten-links nach oben-rechts – ein klassisches Magazinabdeckungswinkel. Mehrfach-Stop-Gradienten wie dieser werden durch Position-Percentagen nach jeder Farbe definiert. Ohne Prozent wird CSS sie gleichmäßig verteilen.

4. Subtile Kartenverdunkelung

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

Karten, die rein weiß sind, wirken flach gegenüber einer weißen Seite. Ein kaum sichtbarer Gradient von rein weiß zu einem sehr hellen Grau verleiht ihnen Tiefe, ohne aufgeklebt zu wirken. Dies ist der Gradient, den niemand bemerkt, und das ist der Punkt.

5. Button-Overlay

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

Von links nach rechts (90deg) Gradienten fühlen sich dynamisch an. Kombinieren Sie mit einem Hover-Zustand, der die Hintergrundposition verschiebt (mit background-size: 200% und Übergang) background-positionfür einen glatten Slide-Effekt auf Buttons.

6. Harte Farbposition (kein Blend)

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

Zwei Farbpositionen an derselben Position erzeugen eine klare Linie ohne Blend. Nützlich für Split-Screen-Layouts, Fortschrittsanzeigen und gestreifte Muster – alles ohne ein zusätzliches Element oder Bild.

Radial-Gradienten: Die andere Variante

radial-gradient strahlt von einem Zentrum aus ab, statt in eine Richtung:

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

Der erste Parameter ist die Form (circle oder ellipse) gefolgt von der Position. at center ist der Standard. Verschieben Sie den Schwerpunkt mit at top left, at 30% 60%, usw. Radial-Gradienten sind ideal für Spotlights, leuchtende Buttons und radiale Hintergrundseiten.

Die Syntax, die niemand erinnert (und wie man sie nie verpasst)

Die drei Dinge, die Entwickler stören, in der Häufigkeit sortiert:

• Winkel vor den Farben – die Richtung kommt immer zuerst, bevor jede Farbposition.
• Uhrzeigersinn in Grad — 90deg ist rechts, nicht nach oben. 0deg ist nach oben.
• Der transparent-zu-farbe-Bereich – Browser mischen durch schwarz, es sei denn, Sie stimmen die RGBA-Werte an beiden Enden ab.

Wenn Sie die Test- und Fehlversuche vollständig vermeiden möchten, bietet die CSS-Gradient-Generator auf iotools.cloud Ihnen die Möglichkeit, Farben visuell auszuwählen, Stopp-Positionen zu ziehen, den Winkel umzudrehen und den endgültigen CSS-Code mit einem Klick zu kopieren. Keine mehr raten, was 143deg aussieht.

Browserunterstützung

linear-gradient und radial-gradient sind standardmäßig in allen modernen Browsern – Chrome, Firefox, Safari und Edge unterstützen sie ohne Präfixe. Sie benötigen keine -webkit- Präfixe für die Standard-Gradient-Syntax im Jahr 2026.

Die einzige Ausnahme ist die ältere -webkit-linear-gradient Syntax, die von Safari 5.1 und Chrome 10–25 verwendet wird. Falls Sie Browser aus dem Jahr 2012 unterstützen, können Sie sie ignorieren.

conic-gradient hat starke Unterstützung in modernen Browsern, aber keine IE/legacy-Fallback – verwenden Sie sie, wenn der Browser-Untergrund immergrün ist.

Die Syntax überspringen – generieren Sie sie visuell

Die CSS-Gradient-Syntax ist nicht komplex, aber es ist langweilig, sie manuell zu justieren. Die CSS-Gradient-Generator auf iotools.cloud bietet Ihnen eine Live-Vorschau, Drag-and-Drop-Farbstopps, Eingabefelder für lineare oder radiale Gradienten und einen Klick zum Kopieren. Erstellen Sie Ihren Gradienten visuell, fügen Sie den Output ein und liefern Sie ihn.

Das könnte Ihnen auch gefallen