Verlauf aus einem Foto
Bauen Sie einen weichen Mesh-Verlauf aus mehreren Farben oder nehmen Sie die Palette aus Ihrem eigenen Foto. Verschieben Sie die Farbpunkte direkt auf der Fläche, fügen Sie Verzerrung und Körnung hinzu, laden Sie das Bild herunter oder kopieren Sie das CSS.
Ihr Browser unterstützt kein WebGL, das Tool kann nicht starten. Probieren Sie einen anderen Browser oder schalten Sie die Hardwarebeschleunigung ein.
Fahren Sie über die Fläche, um die Farbpunkte zu sehen: ziehen Sie sie, ein Doppelklick fügt eine Farbe hinzu. Legen Sie ein Foto auf der Fläche ab oder fügen Sie es aus der Zwischenablage ein.Ziehen Sie die Farbpunkte mit dem Finger; zweimal tippen fügt eine Farbe hinzu.
Die Farben folgen der Reihenfolge der Liste. Umdrehen können Sie sie mit der Schaltfläche "Umgekehrte Reihenfolge".
CSS
Exakt für linear, radial und konisch. Für Mesh und Mosaik ein ähnlicher Hintergrund aus radialen Flecken, ohne Verzerrung und Körnung.
Ihr Verlauf in einer Minute
- 1Farben wählenaus der Palette, zufällig oder aus Ihrem Foto
- 2Punkte verschiebenund Verzerrung und Körnung einstellen
- 3HerunterladenPNG, JPG, WebP, SVG oder CSS kopieren
Was diese Verläufe sind
Ein Mesh-Verlauf besteht aus mehreren Farbpunkten: jeder färbt die Fläche um sich herum, dazwischen gehen die Farben weich ineinander über. Solche Hintergründe stehen hinter Covern, Bannern, Storys und App-Bildschirmen. Der Regler "Weichheit" bestimmt, wie breit die Farben verlaufen, und "Mosaik" teilt die Fläche nach dem nächsten Punkt in Zonen. Linear, radial und konisch sind klassische Verläufe, die sich exakt in CSS übertragen lassen.
Palette aus einem Foto
Laden Sie ein Foto hoch, und das Tool findet darin bis zu sieben Hauptfarben und setzt die Punkte dorthin, wo diese Farben im Bild liegen. So trägt der Verlauf die Stimmung des Fotos: Sonnenuntergang, Meer, Interieur, Produktverpackung. Das Foto bleibt im Browser und wird nirgendwohin gesendet.
Verzerrung und Körnung
Die Verzerrung verschiebt die Farben entlang eines Musters: Wellen, weiches Rauschen, Zellen oder ein Wirbel um die Mitte. "Stärke" bestimmt wie stark, "Mustergröße" wie grob, und der Würfel-Button liefert ein anderes Zufallsmuster. Die Körnung fügt eine leichte Filmkörnung hinzu: damit wirkt der Verlauf nicht wie Plastik und bildet keine Streifen. Unter "Alle Farben anpassen" verschieben Sie Farbton, Sättigung und Helligkeit der ganzen Palette auf einmal.
Probieren Sie auch
Ebenfalls kostenlos und ohne Anmeldung
Häufige Fragen
Keine Antwort gefunden? Schreib uns, wir helfen dir.
In der Größe aus den Feldern W und H, bis 4096 Pixel an der längeren Seite (Grenze der Grafikkarte im Browser). Es gibt fertige Größen für Post, Story, X-Header, Linkvorschau und Hintergrundbild. Auf dem Bildschirm erscheint eine verkleinerte Kopie mit denselben Proportionen.
PNG ist verlustfrei und am besten für Design. JPG und WebP sind leichter und passen für soziale Netzwerke und Websites. SVG eines linearen oder radialen Verlaufs ohne Verzerrung und Körnung ist eine echte Vektordatei, die sich in Figma bearbeiten lässt; bei Mesh-Verläufen und Verzerrungen enthält das SVG ein Bild, weil es für solche Verläufe kein Vektorformat gibt.
Bei linear, radial und konisch ja. Ein Mesh-Verlauf wird in CSS aus mehreren radialen Flecken aufgebaut und sieht ähnlich aus, aber ohne Verzerrung und Körnung: Browser können diese mit normalem CSS nicht zeichnen. Wenn Sie genau diesen Hintergrund brauchen, nehmen Sie das PNG.
Das Foto wird verkleinert, und alle Pixel werden nach Farbähnlichkeit gruppiert (k-Means). Die Gruppenzentren werden zu den Palettenfarben, und der Punkt jeder Farbe wird dorthin gesetzt, wo diese Farbe im Bild am häufigsten vorkommt. Zu seltene Farben werden verworfen.
Ja. Klicken Sie auf das Farbquadrat, um die Auswahl zu öffnen, oder tragen Sie einen HEX-Code in das Feld daneben ein. Möglich sind 2 bis 12 Farben. Das Kreuz entfernt eine Farbe, das Plus fügt eine neue hinzu, und ein Doppelklick auf die Fläche setzt genau dort einen neuen Punkt.
Klicken Sie auf "Link zum Verlauf": der Link wird kopiert und öffnet denselben Verlauf mit allen Farben, Punkten und Einstellungen. Außerdem wird der letzte Verlauf im Browser gespeichert und beim nächsten Besuch geöffnet. Vertan? Machen Sie den Schritt mit dem Pfeil-Button oder Strg+Z rückgängig.
Auf dem Bildschirm wird eine verkleinerte Kopie gezeichnet, die Datei in voller Größe, daher sind Körnung und feine Details der Verzerrung in der Datei kleiner. Farben und Punktpositionen stimmen überein.
Ja, ohne Einschränkung: es ist Ihr Bild. Das Foto, aus dem die Palette stammt, verlässt Ihren Browser nicht, und eine Farbpalette ist nicht urheberrechtlich geschützt.