UUID-Generator
Zufällige UUIDs in großen Mengen erzeugen.
CSS-Verlauf-Generator
Gestalte einen linearen, radialen oder konischen Verlauf und kopiere das CSS.
Farbstopps
0%
100%
Deine Dateien bleiben auf deinem Gerät
So funktioniert es
- 1Wähle linear, radial oder konisch.
- 2Stelle den Winkel ein, bei radial die Form.
- 3Wähle Farben und ziehe jeden Stopp an seine Position. Füge Stopps mit „Farbstopp hinzufügen“ hinzu.
- 4Kopiere das CSS und füge es in dein Stylesheet ein.
Was die Optionen bewirken
- Linear
- Farben gehen entlang einer geraden Linie ineinander über. Der Winkel legt die Richtung fest: 0 Grad geht nach oben, 90 nach rechts, 180 nach unten.
- Radial
- Farben breiten sich von der Mitte aus, als Kreis oder Ellipse.
- Konisch
- Farben laufen wie ein Farbkreis oder Tortendiagramm um die Mitte. Der Winkel dreht den Start.
- Farbstopps
- Jeder Stopp ist eine Farbe an einer Position von 0 bis 100 Prozent. Bis zu acht.
Datenschutz
Alles läuft in deinem Browser. Nichts, was du eingibst, wird an einen Server gesendet.
Häufige Fragen
Welche Browser unterstützen diese Verläufe?
Lineare und radiale Verläufe funktionieren in jedem aktuellen Browser. Konische Verläufe funktionieren in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari.
Wie mache ich eine harte Kante statt eines Übergangs?
Setze zwei Stopps an dieselbe Position, zum Beispiel Rot bei 50% und Blau bei 50%. Zwischen ihnen gibt es keinen Übergang, daher ist der Wechsel scharf.
Kann ich ihn als Textfarbe oder Rahmen verwenden?
Ja. Nutze denselben Wert in background-image, zusammen mit background-clip: text für Text oder border-image für Rahmen.
Warum zeigt die Seite eine andere Farbe als die gewählte?
Der Farbwähler nutzt sRGB-Hexwerte. Bildschirme mit großem Farbraum können sie leicht anders darstellen, aber die CSS-Werte sind exakt.
Wie füge ich Transparenz hinzu?
Dieses Tool gibt deckende Hex-Farben aus. Bearbeite den Code und ändere eine Farbe in ein achtstelliges Hex wie #4f46e580 oder in rgba().