CSS-Verlaufsgenerator
Fügen Sie zwei oder mehr Farbstopps hinzu, um sofort CSS-Code für linear-gradient oder radial-gradient mit Live-Vorschau zu erzeugen. Passen Sie Winkel und Positionen frei an und kopieren Sie den Code mit einem Klick.
Was ein CSS-Verlauf ist
Ein CSS-Verlauf ist eine Weise, ein Band oder eine strahlenförmige Fläche aus zwei oder mehr ineinander übergehenden Farben allein mit einem Stylesheet zu zeichnen – ganz ohne Bild. linear-gradient() verschiebt die Farben geradlinig unter dem angegebenen Winkel, radial-gradient() breitet sie von einer Mitte aus in Kreisen aus. Da alles als Text geschrieben ist, bleibt es leicht, wird beim Vergrößern nicht grob, und eine Farbe zu ändern heißt bloß, einen Wert zu ändern.
Dieses Werkzeug lässt Sie Art, Winkel und Farbstopps am Bildschirm einstellen, das Ergebnis dabei verfolgen und das fertige CSS unmittelbar herauskopieren. Sie dürfen bis zu sechs Farbstopps setzen, jeden mit eigener Farbe und Lage in Prozent; weniger als zwei ergeben keinen Verlauf und führen zu einem Hinweis. Beachten Sie, dass CSS den Winkel auf eigene Weise misst: 0deg läuft von unten nach oben, 90deg von links nach rechts – die Null weist also anderswohin als in der gewöhnlichen Mathematik. Ein radialer Verlauf kennt keinen Winkel, die Winkelangabe wirkt dort nicht.
So bauen Sie einen CSS-Verlauf
- Art wählen Nehmen Sie linear, wenn die Farben geradlinig übergehen sollen, radial, wenn sie sich von einer Mitte aus ausbreiten sollen.
- Winkel festlegen Dies gilt allein für die lineare Art. 0deg läuft von unten nach oben, 90deg von links nach rechts, im Uhrzeigersinn wachsend. Bewegen Sie den Regler und sehen Sie die Richtung sich setzen.
- Farbstopps setzen „Farbe hinzufügen“ bringt Sie auf bis zu sechs. Geben Sie jedem Stopp Farbe und Lage in Prozent, so bestimmen Sie genau, wo eine Farbe der nächsten weicht.
- Die Vorschau prüfen Die Vorschau wird bei jeder Änderung neu gezeichnet, sodass Sie auf der Stelle beurteilen können, ob ein Übergang zu schroff ist oder die Richtung stimmt.
-
Das CSS kopieren
„CSS kopieren“ legt es in die Zwischenablage, bereit, in das
backgroundIhres Stylesheets eingefügt zu werden.
Tipps für die Nutzung
- Sie können bis zu 6 Farbstopps hinzufügen und Farbe sowie Position (%) jedes Stopps frei anpassen, um komplexe, mehrfarbige Verläufe zu erstellen.
- Bei einem linearen Verlauf zeigt 0 Grad von unten nach oben und 90 Grad von links nach rechts – der Schieberegler ermöglicht eine intuitive Anpassung.
- Radiale Verläufe kennen keinen Winkel: Die Farben breiten sich stattdessen kreisförmig vom Zentrum nach außen aus.
- Klicken Sie auf "CSS kopieren", um den generierten Code direkt in die Zwischenablage zu kopieren und ihn in Ihr Stylesheet einzufügen.
Wofür sich CSS-Verläufe eignen
Einer Schaltfläche Tiefe geben
Ein linearer Verlauf, der von oben nach unten leicht dunkler wird, lässt ein Bedienelement drückbarer wirken als eine flache Farbe. Natürlich bleibt es, solange der Farbunterschied klein ist.
Einen Kopfbereich gestalten
Legen Sie einen Verlauf aus zwei oder mehr Farben über das breite Band am Seitenkopf, und Sie haben einen wirkungsvollen Hintergrund, ohne ein einziges Bild zu laden – und ohne die Seite zu verlangsamen.
Eine Scheinwerferwirkung
Ein radialer Verlauf, in der Mitte hell und am Rand dunkel, liest sich als Licht, das auf die Fläche fällt.
Text über ein Foto legen
Legen Sie einen linearen Verlauf von halbdurchsichtigem Schwarz zu völliger Durchsichtigkeit darüber, so bleibt der Text auch über den hellen Stellen des Bildes lesbar.
Wenn Sie erst die Farben bestimmen
Beim Aussuchen dessen, was an jedem Stopp stehen soll, hilft die Farbcode-Umrechnung; beim Nachdenken über Kombinationen die Farbpalette.
Begriffe rund um CSS-Verläufe
- linear-gradient
- Die CSS-Funktion, die einen Verlauf zeichnet, dessen Farben geradlinig unter einem angegebenen Winkel übergehen. Sie eignet sich für bandförmige Hintergründe und die Füllung einer Schaltfläche.
- radial-gradient
- Die CSS-Funktion, die einen von einer Mitte aus in Kreisen oder Ellipsen ausgreifenden Verlauf zeichnet. Sie kennt keinen Winkel.
- Farbstopp
- Eine Angabe, die eine bestimmte Farbe an eine bestimmte Stelle des Verlaufs setzt. Die Lage wird in Prozent genannt, mit dem Anfang bei 0 % und dem Ende bei 100 %.
- Winkel (deg)
- Die Richtung, in die die Farben eines linearen Verlaufs wandern. In CSS läuft 0deg von unten nach oben und 90deg von links nach rechts, im Uhrzeigersinn wachsend – die Null weist anderswohin als in der gewöhnlichen Mathematik.
- Herstellerpräfix
- Ein Präfix wie
-webkit-, angehängt in der Zeit, als jeder Browser eine Neuerung vor der Normung auf eigene Weise anbot. Verläufe sind längst genormt, ein Präfix ist also entbehrlich. - Die Eigenschaft background
- Die CSS-Eigenschaft, die den Hintergrund eines Elements bestimmt. Ein Verlauf gilt als eine Art Hintergrundbild und wird deshalb hier geschrieben.
Häufig gestellte Fragen
Übrigens – warum CSS-Verläufe Verlaufsbilder abgelöst haben
Vor CSS3 wurden Verlaufshintergründe im Web meist als PNG- oder JPEG-Bilder erstellt, die in einem Bildbearbeitungsprogramm angefertigt wurden. Dieser Ansatz brachte reale Nachteile mit sich: zusätzliche Bildanfragen verlangsamten das Laden der Seite, beim Skalieren in responsiven Layouts wirkten die Bilder verschwommen, und schon die Änderung einer einzigen Farbe erforderte den erneuten Export des gesamten Bildes.
Als Browser in den frühen 2010er-Jahren die Syntax von linear-gradient und radial-gradient implementierten, verschwanden diese Probleme weitgehend. Da Verläufe vollständig als Text beschrieben werden, sind sie leichtgewichtig, bleiben bei jeder Größe scharf und lassen sich durch das Ändern weniger Werte im Stylesheet umfärben.
Frühe Implementierungen erforderten unterschiedliche Hersteller-Präfixe (-webkit-, -moz-, -o- usw.) und eine je nach Browser leicht abweichende Syntax, sodass Entwickler mehrere präfixierte Versionen derselben Regel schreiben mussten. Nachdem die Syntax vom W3C standardisiert wurde, funktioniert die präfixlose Version inzwischen einheitlich in allen gängigen Browsern.