Erstellen Sie einen linearen oder radialen CSS-Farbverlauf

Erstellen Sie einen wiederverwendbaren CSS-Farbverlauf, ohne Satzzeichen manuell zusammenzusetzen oder die Position einzelner Farbstopps prüfen zu müssen. Wählen Sie einen linearen oder radialen Verlauf, geben Sie Richtung oder Form an und fügen Sie mindestens zwei geordnete Farbstopps hinzu. Jeder Stopp kann eine CSS-Farbe und optional eine Position enthalten. Sie erhalten einen deterministischen Einzelwert für eine background-image-Deklaration, ein Design-Token, ein Stylesheet oder Anwendungscode. Ungültige Typen, Beschreibungen, Positionen und unvollständige Stopplisten werden mit eindeutigen Eingabefehlern abgewiesen.

Wählen Sie Verlaufsart und Geometrie

Gehen Sie zunächst vom gewünschten visuellen Verhalten aus. Ein linearer Farbverlauf bewegt sich entlang einer Achse. Sein Deskriptor muss daher ein CSS-Winkel wie 135deg oder eine Schlüsselwortrichtung wie to right, to bottom oder to top left sein.

Ein radialer Verlauf breitet sich von einem Punkt aus. Sein Deskriptor kann circle oder ellipse nennen, optional eine Größenangabe wie closest-side oder farthest-corner ergänzen und nach at einen Ursprung festlegen, beispielsweise circle at center oder ellipse farthest-corner at 25% 40%. Die Trennung von Geometrie und Farben erleichtert es, eine Anfrage zu prüfen und wiederzuverwenden.

Der Generator validiert den Deskriptor passend zur gewählten Verlaufsart, statt beliebige Fragmente ungeprüft zu verbinden. So wird etwa eine radiale Form für einen linearen Verlauf erkannt, bevor der Wert ein Stylesheet erreicht. Außerdem können keine Kommas oder deklarationsbrechenden Zeichen in der Geometrie verborgen werden.

Wählen Sie linear für einen Übergang mit klarer Bewegungsrichtung und radial für eine Gestaltung, die sich von einem Fokuspunkt aus ausbreiten soll.

Erstellen Sie eine geordnete Liste von Farbstopps

Fügen Sie die Farbstopps genau in der Reihenfolge hinzu, in der sie im CSS erscheinen sollen. Jeder Stopp benötigt eine Farbe, und ein vollständiger Verlauf braucht mindestens zwei Stopps, da mit nur einer Farbe kein Übergang entstehen kann. Zulässig sind vertraute CSS-Formate wie Farbnamen, Hexadezimalwerte, rgb(), hsl() oder moderne, durch Leerzeichen getrennte Funktionsnotation.

Eine Stoppposition ist optional. Wenn Sie sie auslassen, verteilt der Browser nicht angegebene Stopps nach den CSS-Regeln für Farbverläufe. Wenn Sie eine Position angeben, muss sie aus einer oder zwei CSS-Längen beziehungsweise Prozentangaben bestehen, etwa 0%, 12px oder 30% 45%.

Zwei Positionen erzeugen ein festes Farbband mit derselben Farbe an beiden Grenzen. Der Generator bewahrt Ihre Reihenfolge; er sortiert Positionen nicht und deutet die Palette nicht um, weil überlappende oder absteigende Stopps nützliche harte Übergänge erzeugen können. Klammern werden auf Ausgewogenheit geprüft und gefährliche Deklarationszeichen zurückgewiesen.

Dadurch bleibt das Ergebnis vorhersehbar, während die gestalterische Entscheidung bei Ihnen liegt.

Nutzen Sie den Wert in CSS und automatisierten Abläufen

Die Antwort enthält ein Feld gradient, dessen Wert mit linear-gradient() oder radial-gradient() beginnt. Weisen Sie ihn background-image zu oder verwenden Sie die Kurzform background, wenn keine weiteren Hintergrundebenen erhalten bleiben müssen. Sie können ihn auch in einer benutzerdefinierten Eigenschaft wie --hero-gradient speichern und das Token komponentenübergreifend nutzen.

Da die Fähigkeit ausschließlich deterministische Validierung und Zeichenkettenzusammensetzung ausführt, erzeugt dieselbe Eingabe immer dieselben Abstände und dieselbe Ausgabe. Diese Stabilität eignet sich für Codegenerierung, Snapshot-Tests, Theme-Builder und Inhaltssysteme, die erzeugte Werte bytegenau vergleichen. Netzwerkanfragen, Zufallsauswahl, Modellinferenz und Uhrzeit haben keinerlei Einfluss auf das Resultat.

Beachten Sie bei der Integration, dass dieses Werkzeug den Bildwert des Farbverlaufs und keine vollständige CSS-Regel erzeugt. Selektor, Eigenschaft, Ersatzwerte, Größe und eine möglicherweise notwendige einfarbige Hintergrundfarbe legt Ihre Anwendung selbst fest.