⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

CSS-Generator für lineare Farbverläufe

Erstellen Sie CSS-Verläufe visuell: linearer, radialer oder konischer Typ, Winkelregler und bis zu sechs Farbstopps mit einer Live-Vorschau in voller Breite und kopierbarem Code.

90°
Verarbeitung... 0%

Ergebnis

Auf dieser Seite wird der Verlaufsgenerator geöffnet, wobei der lineare Typ bereits ausgewählt ist. Ziehen Sie den Winkelschieberegler, um die Überblendung zu drehen, die Farbstopps anzupassen und die Vorschau in voller Breite sowie die CSS-Zeilenaktualisierung bei jeder Eingabe anzuzeigen.

linear-gradient() malt Farben entlang einer geraden Linie – der mit Abstand am häufigsten verwendete Farbverlauf in CSS. 90 Grad verlaufen von links nach rechts, 180 Grad von oben nach unten, und jeder Winkel dazwischen ergibt eine Diagonale; Die Stopppositionen in Prozent entscheiden darüber, wo die einzelnen Farbbänder beginnen, in die nächsten überzugehen.

Wenn die Vorschau richtig aussieht, kopieren Sie die Hintergrundzeile in Ihr Stylesheet. Wenn Sie einen Ausgangspunkt anstelle einer leeren Tafel wünschen, öffnen die voreingestellten Seiten „Sonnenuntergang“, „Ozean“ und „Pastell“ dasselbe Tool mit bereits geladenen bewährten Farbpaaren.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Wählen Sie den Verlaufstyp (linear, radial, konisch) mit einem Winkelschieberegler für den linearen und konischen Modus aus.
  • Liste der Farbstopps: zwei Stopps zum Starten, Hinzufügen oder Entfernen von bis zu sechs, jeder mit eigener Farbauswahl und Position in Prozent.
  • Kopierbare Hintergrund-CSS-Zeile sowie vorgefertigte voreingestellte Seiten für Sonnenuntergangs-, Ozean- und Pastellverläufe.

Wichtigste Vorteile

✓ Die Vorschau in voller Breite wird bei jeder Änderung – Typ, Winkel und jedem Farbstopp – neu gezeichnet, sodass das kopierte CSS genau das ist, was Sie gesehen haben.
✓ Bis zu sechs Farbstopps mit individuellen Positionen decken alles ab, von einer einfachen zweifarbigen Überblendung bis hin zu komplexen Multiband-Hintergründen.
✓ Eine Deklaration, drei Motoren: Wechseln Sie zwischen linear, radial und konisch, ohne Ihre Anschläge neu aufbauen zu müssen.

Anwendungsfälle

  • • Erstellen Sie einen Heldenabschnitt-Hintergrund, indem Sie den Winkel und die Farbstopps ziehen, anstatt linear-gradient() manuell zu bearbeiten und neu zu laden.
  • • Vergleichen Sie mit einem Schalter dieselben Farbstopps als lineare, radiale und konische Farbverläufe – die Stopps werden zwischen den Typen übertragen.
  • • Schnappen Sie sich eine bewährte Kombination von der Voreinstellungsseite „Sonnenuntergang“, „Meer“ oder „Pastell“ und passen Sie sie an Ihre Markenfarben an.