CSS-Verlaufsgenerator
Fügen Sie Farbstopps hinzu, wählen Sie linear, radial oder konisch, und kopieren Sie den fertigen background-CSS-Code direkt in Ihr Stylesheet. Starten Sie mit einer Vorlage oder erstellen Sie einen Verlauf von Grund auf.
Voreinstellungen
Typ
Farbstopps
Vorschau
CSS
Häufig gestellte Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf lässt Farben entlang einer geraden Linie in einem gewählten Winkel übergehen (0° zeigt nach oben, 90° nach rechts). Ein radialer Verlauf lässt Farben von einem Mittelpunkt aus kreis- oder ellipsenförmig nach außen übergehen. Ein konischer Verlauf lässt Farben wie ein Farbrad um einen Mittelpunkt kreisen, ausgehend von einem gewählten Winkel. Alle drei werden von jedem modernen Browser breit unterstützt.
Wie viele Farbstopps kann ich hinzufügen?
So viele Sie möchten, jeder mit eigener Farbe und Position (0-100 %). Die Position bestimmt, wo entlang des Verlaufs diese Farbe zentriert ist, wodurch scharfe Übergänge (eng beieinanderliegende Stopps) oder weiche Verläufe (weit auseinanderliegende Stopps) möglich sind.
Legen mich die Vorlagen auf genau diesen Verlauf fest?
Nein. Ein Klick auf eine Vorlage lädt nur deren Typ, Farben und Stopps als Ausgangspunkt in den Editor - jede Einstellung bleibt danach vollständig bearbeitbar, sodass Sie den Winkel anpassen, Stopps hinzufügen oder Farben ändern können, um sie zu Ihrer eigenen zu machen.
Kann ich diesen Verlauf als Hintergrundbild verwenden, nicht nur als einfarbigen Hintergrund?
Ja, der generierte Code ist ein gültiger Wert für die CSS-Eigenschaften background oder background-image. Er funktioniert überall dort, wo ein Hintergrundbild verwendet würde, auch als Ebene über einem echten Bild mittels einer durch Kommas getrennten background-image-Liste.