Lineare und radiale CSS-Verläufe visuell mit mehreren Farbstopps erstellen
Ein Verlaufsgenerator lässt Sie CSS-Verläufe visuell bauen — Farben wählen, Stopps positionieren und die Richtung bestimmen — und gibt Ihnen dann das exakte CSS zum Einfügen in Ihr Stylesheet. Ein Verlauf ist ein weicher Übergang zwischen zwei oder mehr Farben, und CSS erzeugt ihn ohne Bild, sodass er bei jeder Größe scharf bleibt und kein Downloadgewicht hinzufügt. Die zwei Haupttypen sind linear, der entlang einer geraden Linie in einem von Ihnen gewählten Winkel übergeht, und radial, der von einem Mittelpunkt kreis- oder ellipsenförmig nach außen übergeht.
Verlaufs-CSS von Hand zu schreiben ist fummelig, weil die Syntax Richtung, mehrere Farbstopps und ihre Positionen in eine Zeile packt, und ein kleiner Fehler erzeugt eine harte Kante oder den falschen Winkel. Es visuell zu bauen und den erzeugten Code abzulesen beseitigt diese Reibung: Sie sehen das Ergebnis beim Anpassen jedes Farbstopps und kopieren dann einen Wert, von dem Sie wissen, dass er funktioniert. Dieses Tool erzeugt standardbasiertes CSS im Browser, bereit für Hintergründe, Buttons, Overlays und Header.
Ein linearer Verlauf mischt Farben entlang einer geraden Linie in einer Richtung oder einem Winkel, den Sie setzen, gut für Hintergründe und Balken. Ein radialer Verlauf mischt von einem Mittelpunkt kreis- oder ellipsenförmig nach außen, nützlich für Spotlights, Glühen und runde Highlights.
Farbstopps sind die Punkte entlang des Verlaufs, an denen eine bestimmte Farbe sitzt, mit einer Position (wie 0%, 50%, 100%). Mehr Stopps erzeugen mehrfarbige Übergänge, und das Verschieben einer Stopp-Position steuert, wo eine Farbe der nächsten weicht.
Ja, lineare und radiale Verläufe werden in modernen Browsern breit unterstützt, und da sie reines CSS sind, gibt es kein Bild zu laden. Für sehr alte Browser ist eine einfarbige Hintergrundfarbe ein sicherer Fallback hinter dem Verlauf.
Nutzen Sie eine Farbe mit Alphawert (etwa ein rgba oder ein 8-stelliges Hex, das auf 00 endet) als einen Stopp. Von einer Vollfarbe zu ihrer völlig transparenten Version auszublenden ist der Standardweg, lesbare Overlays über Bildern zu erzeugen.
Farbpaletten-Generator · Kontrast-Prüfer · Farbmischer · Farbnamen-Finder