Generieren von CSS-Gradienten
Entwerfen Sie schöne CSS-Gradienten und kopieren Sie den Code.
Wie man die CSS Gradientengenerator
Wählen Sie linear oder radial
Lineare Mischungen entlang einer geraden Linie, radial von einem Mittelpunkt nach außen verteilt.
Hinzufügen und Positionieren von Farbstopps
Fügen Sie so viele Farben hinzu, wie Sie benötigen, und ziehen Sie jeden Anschlag, um ihn entlang des Verlaufs zu platzieren.
Kopieren Sie das CSS
Passen Sie den Winkel oder die Form an, bis sie richtig aussieht, und kopieren Sie dann das generierte CSS in Ihr Stylesheet.
Über die CSS Gradientengenerator
Die CSS-Gradientensyntax ist leicht zu lesen und miserabel aus dem Speicher zu schreiben. Winkel werden aus einer Richtung gemessen, die die meisten Menschen beim ersten Mal überrascht, Farbstopppositionen interagieren auf schwer vorhersagbare Weise, und der einzige zuverlässige Weg, um einen Gradienten richtig zu sehen, ist, wie er sich ändert, während man ihn anpasst. Dafür ist dieses Tool: Bauen Sie den Gradienten visuell auf, kopieren Sie dann CSS, das Sie direkt in ein Stylesheet einfügen können.
Beide Typen sind abgedeckt. Ein linearer Verlauf fügt sich entlang einer geraden Linie in jedem Winkel, den Sie einstellen, und ist derjenige, der für Knöpfe, Heldenabschnitte und Hintergrundbänder verwendet wird. Ein radialer Verlauf breitet sich von einem Mittelpunkt eines Kreises oder einer Ellipse nach außen aus, der zu Scheinwerfern, Glühen und subtilen Vignetten passt. In beiden Fällen können Sie so viele Farbstopps hinzufügen, wie Sie brauchen, und jeden einzelnen entlang der Strecke ziehen.
Die Ausgabe ist einfaches, produktionsbereites CSS ohne Abhängigkeit von dieser Website und keine Anbieterpräfixe, die Sie nicht benötigen, da jeder aktuelle Browser seit Jahren unpräfixierte Steigungen unterstützt. Alles läuft in Ihrem Browser, und das generierte CSS ist Ihnen in jedem Projekt, kommerziell oder anderweitig, zur Verfügung.
Häufig gestellte Fragen
- Wie erstelle ich einen CSS-Gradienten?
- Wählen Sie linear oder radial, fügen Sie Ihre Farbstopps hinzu, setzen Sie den Winkel und kopieren Sie dann das erzeugte CSS direkt in Ihr Stylesheet.
- Was ist der Unterschied zwischen linear und radial?
- Ein linearer Gradient fügt sich entlang einer geraden Linie in einem Winkel, den Sie wählen. Ein radialer Gradient breitet sich in einem Kreis oder einer Ellipse von einem Mittelpunkt aus aus.
- Kann ich mehr als zwei Farben verwenden?
- Ja. Fügen Sie so viele Farbstopps hinzu, wie Sie benötigen, und positionieren Sie jeden entlang des Verlaufs.