CSS-Filter-Generator
Bauen Sie eine neu sortierbare Kette aus CSS-filter()- und backdrop-filter()-Funktionen und sehen Sie die Vorschau live auf Ihrem eigenen Foto – mit kopierbarer CSS-Zeile und PNG-Export.
🔒 Wird vollständig in Ihrem Browser verarbeitet – nichts, was Sie hier eingeben, wird jemals hochgeladen.
Ergebnis
Jeder CSS-Filter-Generator lässt Sie blur(), brightness(), contrast() und die anderen stapeln – aber fast keiner lässt die Reihenfolge eine Rolle spielen, weil die meisten Filter nur in einer festen Abfolge anwenden. Dieses Tool ist anders: Die Filterkette ist eine echte, neu sortierbare Liste mit nativem HTML5-Drag-and-Drop, und das Umstellen zweier Funktionen verändert die gerenderten Pixel tatsächlich, genau wie im produktiven CSS. Blur-dann-Hue-Rotate sieht anders aus als Hue-Rotate-dann-Blur, und jetzt können Sie den Unterschied sehen, bevor Sie den Code ausliefern.
Laden Sie Ihr eigenes Foto hoch, und die neun verkettbaren Funktionen – blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert und drop-shadow – wirken live darauf als echte filter-CSS-Deklaration auf einem <img>-Element, nicht als simulierte Farbfläche. Fügen Sie eine Funktion über die Auswahl hinzu, ziehen Sie ihre Zeile in der Liste nach oben oder unten, um ihre Position in der Kette zu ändern, passen Sie den Regler an, und die Vorschau sowie die kopierbare filter: ...;-Zeile werden bei jeder Eingabe aktualisiert. Entfernen Sie einen Schritt mit der eigenen Schaltfläche direkt in der Zeile.
Eine zweite, kleinere Kette erstellt einen backdrop-filter-Wert, der auf ein Overlay-Panel über der Vorschau angewendet wird. So sehen Sie den Milchglaseffekt – die Technik hinter modernen, transparenten Navigationsleisten und modalen Hintergründen – ohne die zugrunde liegende Filterkette des Bildes zu verändern. Es funktioniert sogar, bevor Sie ein Foto hochladen, vor dem farbenfrohen Platzhalter-Hintergrund, sodass Sie in Sekunden ein Milchglas-Panel-Design einstellen können.
Wenn die Vorschau stimmt, kopieren Sie das CSS direkt aus dem Ausgabefeld, oder exportieren Sie ein echtes PNG: Derselbe Filter-String wird der ctx.filter-Eigenschaft eines Canvas-2D-Kontexts übergeben – die die identische Syntax wie die CSS-filter-Eigenschaft verwendet – und die Zeichenfläche wird mit canvas.toBlob() in eine herunterladbare Datei umgewandelt. Das exportierte Bild entspricht exakt der Live-Vorschau, weil es vom selben Filter-String erzeugt wird, der dieselbe Rendering-Grundlage nutzt. Alles geschieht lokal in Ihrem Browser; Ihr Foto wird niemals irgendwohin hochgeladen.