CodesGeneratorenMedien

CSS Gradient Generator

Farbverläufe für modernes Webdesign

Manchmal braucht es nur das richtige Zusammenspiel von Farben, um einer Webseite einen neuen Look zu geben. Experimentiere mit unterschiedlichen CSS-Farbverläufen, entdecke spannende Übergänge und finde heraus, wie sich Farbflächen in ausdrucksstarke Hintergründe verwandeln lassen.

CSS Farbverläufe generieren | CSS Gradient Generator

Gestalte einen Farbverlauf, sieh jede Änderung sofort und kopiere einfach den fertigen CSS-Code - alles Kostenlos.

Farbpunkte

Ziehe die Punkte auf dem Band hin und her. Ein Klick ins Band setzt einen neuen Punkt. Mit den Pfeiltasten verschiebst du einen ausgewählten Punkt.

    Art und Richtung

    Linear: Die Farben laufen in einer geraden Richtung. Bei 0° zeigt der Verlauf nach oben, bei 90° nach rechts, bei 180° nach unten.

    Radial: Die Farben breiten sich von einem Mittelpunkt aus, rund wie ein Kreis oder oval wie eine Ellipse. Mit der Position verschiebst du den Mittelpunkt.

    Konisch: Die Farben drehen sich wie ein Zeiger um einen Mittelpunkt. Der Winkel legt fest, wo der Verlauf beginnt.

    Winkel
    Mittelpunkt

    Tipp: Setze den letzten Farbpunkt auf weniger als 100 %, dann ist die Wiederholung als Muster zu sehen.

    CSS-Code

    Der Code passt sich bei jeder Änderung an. Kopiere ihn und füge ihn in die Stilregeln deines Elements ein.

    Vorlagen

    Ein Klick übernimmt die Vorlage in den Editor. Dort kannst du alles weiter anpassen.

    Was ist ein Farbverlauf?

    Ein Farbverlauf lässt sich in CSS direkt als Hintergrund beschreiben: Zwei oder mehr Farben gehen fließend ineinander über, ganz ohne Bilddatei. Das spart Ladezeit, bleibt auf jedem Bildschirm gestochen scharf und lässt sich mit einer einzigen Zeile ändern. Beim linearen Verlauf wandern die Farben in einer geraden Richtung, beim radialen strahlen sie von einem Punkt nach außen, und der konische Verlauf dreht sich wie ein Zeiger um die Mitte.

    Mit diesem Werkzeug stellst du Farben, Richtung und Mittelpunkt per Maus oder Fingertipp ein und siehst jede Änderung sofort in der Vorschau. Der passende Code entsteht nebenbei und lässt sich mit einem Klick kopieren. Wer nicht bei null anfangen möchte, startet mit einer Vorlage und passt sie nach Belieben an. Alles läuft in deinem Browser. Deine Verläufe werden weder gespeichert noch an einen Server gesendet.

    Häufige Fragen

    Was ist ein CSS-Farbverlauf?

    Ein Farbverlauf ist ein Hintergrund, den der Browser selbst zeichnet. Du gibst nur die Farben und die Richtung an, den Rest berechnet der Browser. Es wird keine Bilddatei geladen, deshalb ist die Seite schneller und die Darstellung bleibt auch bei starker Vergrößerung scharf.

    Wie erstelle ich einen Verlauf mit diesem Werkzeug?

    Wähle eine Art, zum Beispiel linear. Ändere dann die Farben der Farbpunkte oder ziehe die Punkte auf dem Band an eine andere Stelle. Mit „Farbpunkt hinzufügen“ kommt eine weitere Farbe dazu. Die Vorschau zeigt jede Änderung sofort. Zum Schluss kopierst du den Code mit einem Klick.

    Was bedeuten linear, radial und konisch?

    Linear heißt: Die Farben laufen in einer geraden Linie, etwa von links nach rechts. Radial heißt: Die Farben breiten sich von einem Mittelpunkt kreisförmig aus. Konisch heißt: Die Farben drehen sich um einen Mittelpunkt, ähnlich wie bei einem Tortendiagramm.

    Wie baue ich den Code in meine Website ein?

    Kopiere den Code und füge ihn in die Stilregel des Elements ein, das den Verlauf bekommen soll, zum Beispiel in die Regel für deinen Kopfbereich oder einen Knopf. Wer einen Seitenbaukasten nutzt, trägt den Wert im Feld für eigenes CSS oder im Hintergrund-Bereich des Elements ein.

    Wozu dient die Deckkraft eines Farbpunkts?

    Mit der Deckkraft machst du eine Farbe durchscheinend. Bei 100 % ist sie voll sichtbar, bei 0 % verschwindet sie ganz. So lassen sich weiche Übergänge zum Hintergrund oder zu einem Bild darunter gestalten. Das karierte Muster in der Vorschau zeigt dir, wo der Verlauf durchscheint.

    Was ist die Ersatzfarbe?

    Das ist eine einfache Farbe, die vor dem Verlauf im Code steht. Sehr alte Browser, die Verläufe nicht kennen, zeigen dann wenigstens diese Farbe an. Moderne Browser nutzen sie nicht, du kannst sie also unbesorgt mitliefern oder abschalten.

    Kann ich einen vorhandenen Verlauf weiterbearbeiten?

    Ja. Klicke auf „CSS einfügen“ und füge den Code deines Verlaufs ein, zum Beispiel linear-gradient(90deg, #3452ff, #ff8fb1). Das Werkzeug liest Farben, Richtung und Positionen aus und zeigt sie im Editor an.

    Wie bediene ich das Werkzeug mit der Tastatur?

    Mit der Tabulatortaste springst du von Feld zu Feld. Ein Farbpunkt auf dem Band lässt sich mit den Pfeiltasten verschieben (mit gedrückter Umschalttaste in größeren Schritten) und mit der Entfernen-Taste löschen. Den Winkelregler steuerst du ebenfalls mit den Pfeiltasten. Fenster schließt du mit Esc.

    Werden meine Verläufe gespeichert?

    Nein. Das Werkzeug arbeitet vollständig in deinem Browser. Es werden keine Daten an einen Server geschickt und nichts im Browser abgelegt. Wenn du die Seite neu lädst, beginnst du wieder mit dem Startverlauf. Kopiere deinen Code also, bevor du die Seite verlässt.

    Ohne Anmeldung
    100 % kostenlos
    Datenschutzfreundlich
    Direkt im Browser
    Intuitiv bedienbar
    Interaktiv & vielseitig

    Hinweise und Feedback

    Wir sind bestrebt, unsere Website kontinuierlich zu aktualisieren, zu optimieren und weiterzuentwickeln.
    Sollte etwas nicht richtig funktionieren oder unvollständig sein kannst du zunächst einen Browser wie Firefox oder Chrome verwenden oder den Cache deines Browsers leeren.

    Wenn das Problem weiterhin besteht, dir veraltete Informationen oder fehlerhafte Funktionen, inhaltliche Unklarheiten oder Lücken auffallen oder du einen Verbesserungsvorschlag für uns hast, kannst du uns per E-Mail schreiben. Wir freuen uns über deine Hinweise und Vorschläge. Sie helfen uns, mögliche Verbesserungen und Optimierungen zu erkennen und bei der Weiterentwicklung unserer Website zu berücksichtigen.

    Share