Was ist ein CSS-Gradient-Generator?
Ein CSS-Gradient-Generator ist ein visuelles Werkzeug, mit dem Sie lineare, radiale oder konische Verläufe entwerfen können und sofort den entsprechenden CSS-Code erhalten. Anstatt die Verlauf-Syntax von Hand zu schreiben, können Sie Farben, Positionen und Winkel interaktiv anpassen und den einsatzbereiten Code direkt in Ihr Stylesheet kopieren.
So verwenden Sie diesen CSS-Gradient-Generator
- Wählen Sie zwei Farben mit den Farbwählern aus, wählen Sie einen Verlauftyp (linear, radial oder konisch) und passen Sie den Winkel mit dem Schieberegler an.
- Die Gradient-Vorschau und der CSS-Code werden in Echtzeit aktualisiert, wenn Sie Änderungen vornehmen.
- Klicken Sie auf „Zufällig", um eine zufällige Farbkombination zu generieren, oder auf „CSS kopieren", um den generierten Code zu kopieren.
Wichtige Konzepte
Ein CSS-Verlauf ist ein sanfter Übergang zwischen zwei oder mehr Farben, der vom Browser nativ dargestellt wird, ohne Bilder zu verwenden. Lineare Verläufe fließen in einer geraden Linie bei einem festgelegten Winkel. Radiale Verläufe dehnen sich von einem Mittelpunkt in einer kreisförmigen oder elliptischen Form aus. Farbtöne definieren, wo jede Farbe entlang des Verlaufs angezeigt wird; die Anpassung ihrer Positionen kontrolliert, wie schnell Farben ineinander übergehen.
Häufig gestellte Fragen
Wie viele Farben kann ich verwenden?
Dieses Werkzeug unterstützt zwei Farbstops. Für einfache zweifarbige Verläufe werden die häufigsten Anwendungsfälle abgedeckt. Sie können manuell weitere Farbtöne hinzufügen, indem Sie den generierten CSS-Code direkt bearbeiten.
Ist der generierte CSS-Code mit allen Browsern kompatibel?
Ja. Moderne CSS-Verläufe werden in allen aktuellen Browsern unterstützt, darunter Chrome, Firefox, Safari und Edge. Der generierte Code verwendet die Standard-Syntax ohne Hersteller-Präfixe.
Kann ich transparente Verläufe erstellen?
Ja. Stellen Sie den Alpha-Kanal bei jedem Farbtон ein, um transparente oder halbtransparente Bereiche zu erstellen. Dies ist besonders nützlich für Overlay-Effekte und das Ausblenden von Inhalten in einen Hintergrund.