Die Ergebnisse dienen nur zu Informationszwecken und können Fehler enthalten. Bitte überprüfen Sie wichtige Informationen unabhängig. Die Nutzung dieses Tools erfolgt auf eigene Gefahr.
Was dieses Tool macht
Der CSS-Verlauf-Generator erstellt aus zwei Farben eine background-Deklaration. Wählen Sie Linear, um entlang einer Linie in beliebigem Winkel zu überblenden, oder Radial, um kreisförmig von der Mitte nach außen zu verlaufen. Die Vorschau aktualisiert sich, während Sie die Regler bewegen, und im Ausgabefeld steht eine fertige Zeile zum Einfügen wie background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
Bei einem linearen Verlauf bestimmt der Winkel die Richtung: 0deg verläuft von unten nach oben, 90deg von links nach rechts und 180deg von oben nach unten. Ein radialer Verlauf ignoriert den Winkel und verwendet circle, sodass die erste Farbe in der Mitte liegt. Beide Formen werden von allen aktuellen Browsern ohne Vendor-Präfixe unterstützt, die erzeugte Zeile funktioniert also unverändert.
Wann Sie es verwenden
- Sie geben einem Hero-Bereich oder einem Call-to-Action-Button einen dezenten zweifarbigen Hintergrund.
- Sie ersetzen ein Hintergrundbild mit Verlauf durch CSS, damit die Seite eine Datei weniger laden muss.
- Sie probieren Farbpaare Ihrer Marke nebeneinander aus, bevor Sie sie in ein Designsystem übernehmen.
- Sie bauen einen weichen radialen Schein hinter einem Logo oder einer Illustration.
Beispiel
Eingabe
Typ: linear
Winkel: 90
Farben: #3b82f6, #8b5cf6Ausgabe
background: linear-gradient(90deg, #3b82f6, #8b5cf6);Fragen zu diesem Tool
Wie füge ich eine dritte Farbe hinzu?
Ergänzen Sie sie durch ein Komma getrennt in der Liste innerhalb der Funktion: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). Sie können jeder Farbe auch eine Position geben, etwa #8b5cf6 40%, um zu steuern, wo der Übergang stattfindet.
Bleibt Text auf einem Verlauf lesbar?
Prüfen Sie die Textfarbe mit dem Farbkontrast-Prüfer gegen beide Enden des Verlaufs. Fällt ein Ende durch, dunkeln Sie es ab oder legen Sie eine halbtransparente Überlagerung hinter den Text.
Kann ich einen Verlauf als Rahmen oder Textfüllung verwenden?
Ja, mit zusätzlichem CSS. Für Text setzen Sie den Verlauf als background und ergänzen background-clip: text sowie color: transparent. Für Rahmen akzeptiert border-image dieselbe Verlaufsfunktion.
Warum zeigt mein Verlauf sichtbare Streifen?
Streifenbildung (Banding) entsteht, wenn zwei ähnliche Farben über eine große Fläche gestreckt werden. Wählen Sie Farben, die weiter auseinanderliegen, verkleinern Sie die Fläche oder fügen Sie einen Zwischenstopp ein, damit jeder Schritt kleiner wird.
Ist dieses Tool kostenlos?
Ja, es ist kostenlos. Ohne Anmeldung und ohne E-Mail. Ergebnisse direkt auf dieser Seite.
Wie erhalte ich mein Ergebnis?
Nutze das Tool auf dieser Seite. Das Ergebnis erscheint hier und wird nicht per E-Mail zugestellt.