Einen schönen Verlauf aus einem beliebigen Foto extrahieren — Bild ablegen, Stimmung wählen und die dominanten Farben werden zu ziehbaren Verlaufsstopps. Sofort kopierbares CSS erhalten.

Bild hier ablegen

oder klicken zum Durchsuchen — auch aus der Zwischenablage einfügen möglich

Alles läuft im Browser — Ihr Bild wird nie hochgeladen, keine Registrierung, vollständig kostenlos.

Quellbild
Farben werden gelesen…
Quellbild
Stimmung
Extrahierte Farben
Dies sind die dominanten Farben aus Ihrem Bild. Auf ein Farbfeld klicken zum Kopieren oder die Stopps unten ziehen, um den Verlauf feinzujustieren.
Verlaufsvorschau
Verlaufstyp
Winkel
°
Farbstopps
Einen Griff ziehen, um einen Stopp zu verschieben, oder auf die Leiste klicken, um einen hinzuzufügen. Stopp auswählen, um seine Farbe zu bearbeiten.
Ausgewählter Stopp
%
CSS
background: ;

Über Verlauf-Generator aus Bild

Der Gradient Generator from Image verwandelt jedes Foto in einen einsatzbereiten CSS-Verlauf. Ziehe ein Bild hinein, durchsuche es oder füge es ein, und das Tool liest es auf einer Canvas ein, extrahiert seine dominanten Farben und legt sie als Verlaufsstopps an, die du ziehen, umfärben und neu anordnen kannst, bis die Mischung dem Gefühl des Originals entspricht.

Ein Stimmungswähler (Bunt, Hell, Gedeckt, Tief oder Dunkel) ändert, welche extrahierten Farben zu Stopps werden, sodass ein Foto mehrere sehr unterschiedliche Verläufe liefern kann. Du steuerst den Verlaufstyp (linear, radial oder konisch), den Winkel und die Stopps selbst: Klicke auf die Leiste, um einen hinzuzufügen, ziehe zum Umpositionieren, kehre um oder rotiere mit einem Klick.

Der gesamte Vorgang läuft in deinem Browser; dein Bild wird niemals auf einen Server hochgeladen. Wenn die Vorschau passt, kopiere die vollständige CSS-Regel, nur den Hintergrundwert oder die extrahierten Farben allein: ideal für Hero-Bereiche, Seitenhintergründe und Markenvisuals, die aus Fotografie abgeleitet sind.

So verwenden Sie Verlauf-Generator aus Bild

  1. Ziehe ein Bild hinein, klicke zum Durchsuchen oder füge eines aus deiner Zwischenablage ein.
  2. Wähle eine Stimmung (Bunt, Hell, Gedeckt, Tief oder Dunkel), um festzulegen, welche extrahierten Farben zu Stopps werden.
  3. Wähle den Verlaufstyp (linear, radial oder konisch) und passe den Winkel an.
  4. Ziehe die Farbstopps, um die Mischung feinabzustimmen; füge Stopps hinzu, entferne sie, kehre sie um oder mische sie neu.
  5. Klicke auf „CSS kopieren“, um den einfügefertigen Verlaufscode zu erhalten.

Häufig gestellte Fragen

Nein. Das Bild wird direkt in eine Canvas in deinem Browser eingelesen, und die Farbextraktion sowie die Verlaufsberechnung geschehen vollständig lokal. Zu keinem Zeitpunkt verlässt etwas dein Gerät.

Ja, vollständig. Da alles clientseitig läuft, gibt es keine Credits, Konten oder Limits: Extrahiere Verläufe aus so vielen Bildern, wie du möchtest.

Dieses Tool startet mit einem Foto: Es extrahiert die dominanten Farben des Bildes und baut den Verlauf daraus auf. Der reguläre Gradient Generator beginnt bei null mit selbst gewählten Farben. Beide liefern dieselbe Art von editierbarem, kopierfertigem CSS.

Die Stimmungen ordnen die aus deinem Bild extrahierten Farben neu: Bunt bevorzugt lebendige, vielfältige Farbtöne, Hell wählt helle, gesättigte Töne, Gedeckt wählt weichere, entsättigte Töne, und Tief sowie Dunkel ziehen satte, dunklere Farben heran. Ein Wechsel der Stimmung baut die Verlaufsstopps sofort neu auf.

Ja. Jeder Stopp ist ziehbar, du kannst auf die Leiste klicken, um Stopps hinzuzufügen oder ausgewählte zu entfernen, die Farbe eines beliebigen Stopps ändern, zwischen linear, radial und konisch wechseln, den Winkel in 45°-Schritten rotieren, die Richtung umkehren oder neue Farben aus dem Bild mischen.


Beliebte Suchen
Verlauf aus Bild Verlauf aus Foto extrahieren Bild zu CSS-Verlauf Foto-Verlauf-Generator Verlauf aus Bild erstellen CSS-Verlauf aus Bild
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.
Problem melden

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.