Verlauf-Generator

Erstellen Sie linear-gradient- oder radial-gradient-Code mit einer Live-Vorschau.

Verlauf-Generator

Ein browsergestütztes Ergebnis zur Planung und als Referenz.

Farbe AFarbe B WinkelMode

CSS / HEX

RATGEBER

Was vor der Verwendung zu prüfen ist

Wann dieses Tool nützlich ist

Verwenden Sie dies, um einen Zwei-Farben-Web-Hintergrund oder einen Kartenakzent zu erstellen. Wählen Sie Start- und Endfarbe, einen linearen oder radialen Typ sowie einen Winkel, um sowohl eine Vorschau als auch das CSS zu erhalten.

Wie das Ergebnis erzeugt wird

Der lineare Modus erstellt ein linear-gradient mit dem eingegebenen Winkel; der radiale Modus erstellt einen kreisförmigen radial-gradient. Der Browser rendert die Zwischenfarben zwischen den zwei Farb-Stops.

Beispiel und Interpretation

Legen Sie für eine Links-nach-rechts-Hintergrunddeklaration #3366FF auf #FF6655 bei 90 Grad fest. Kopieren Sie es in die echte Komponente und prüfen Sie den Kontrast des darüber platzierten Texts erneut.

Anwendungsbereich und Einschränkungen

Der Generator verwendet zwei Farb-Stops und kann Farbinterpolationsunterschiede zwischen Browsern nicht beseitigen. Fügen Sie komplexe Stops, Alpha-Übergänge oder Farben mit weitem Farbumfang in einem vollständigen Editor hinzu.

Häufig gestellte Fragen

Wie verschiebe ich eine Farbe vom Gradienten-Generator in eine andere App?

Nutzen Sie die Kopier-Schaltfläche unter dem Ergebnis, um CSS, HEX oder HSL-Text zu kopieren. Prüfen Sie, dass die Ziel-App dasselbe Farbformat interpretiert.

Entspricht eine Bildschirmfarbe aus dem Gradienten-Generator dem Druck?

Nicht automatisch. Emissive RGB-Bildschirme sowie reflektierendes Papier und Tinte verwenden unterschiedliche Farbräume und Mischmodelle, daher werden weiterhin Druckprofile und Proofs benötigt.

Kann ich ein Design-Token allein mit dem Gradienten-Generator freigeben?

Nutzen Sie es als Kandidat und testen Sie anschließend den echten Hintergrund, den Dunkelmodus, Interaktionszustände und den Textkontrast, bevor Sie einen Token benennen und freigeben.