CSS-Verlauf aus einem Bild
Importieren Sie ein Foto oder eine Illustration: Die dominanten Farben werden extrahiert und automatisch zu einem kopierfertigen CSS-Verlauf linear-gradient zusammengesetzt. 100% lokale Verarbeitung in Ihrem Browser (WebAssembly) – Ihr Bild wird nie an einen Server gesendet.
So funktioniert es
Die farbliche Stimmung eines Fotos für einen Sektionshintergrund, ein Banner oder eine Produktkarte übernehmen, ohne das Bild selbst zu duplizieren: genau das leistet dieses Werkzeug. Es analysiert die Pixel des importierten Bildes, um die am stärksten vertretenen Farbtöne zu ermitteln, und fügt sie der Reihe nach zu einem linearen Verlauf zusammen, dessen Winkel Sie anpassen können, bevor Sie die fertige CSS-Eigenschaft kopieren.
Behält der Verlauf die Farbreihenfolge des Bildes bei?
Die Farben werden nach ihrer Häufigkeit im Quellbild von der häufigsten zur seltensten sortiert, und der Verlauf reiht sie in dieser Reihenfolge aneinander. Wenn Ihnen das Ergebnis optisch nicht gefällt, können Sie den Code kopieren und die Farben in Ihrem Stylesheet von Hand umsortieren.
Wie viele Farben sollte man für ein sauberes Ergebnis wählen?
Zwei oder drei Farben ergeben in der Regel einen gut lesbaren, eleganten Verlauf, ähnlich einem klassischen Sektionshintergrund. Ab mehr als vier Farben erinnert das Ergebnis eher an einen Regenbogen als an einen dezenten Verlauf – das bleibt gewollt auffälligen Effekten vorbehalten.
Datenschutz: Die Farbextraktion und die Erzeugung des CSS erfolgen vollständig in Ihrem Browser über WebAssembly, ohne dass Ihr Bild auf einen Server hochgeladen wird.