CSS-Filtergenerator

Mit jedem CSS-Filtergenerator können Sie Blur(), Brightness(), Contrast() und den Rest stapeln – aber bei fast keinem von ihnen spielt die Reihenfolge eine Rolle, da die meisten Filter immer nur in einer festen Reihenfolge anwenden. Hier ist es anders: Die Filterkette ist eine echte, neu anordenbare Liste, die mit nativem HTML5-Drag-and-Drop erstellt wurde, und die Neuordnung zweier Funktionen ändert tatsächlich die gerenderten Pixel, genau wie es in Produktions-CSS der Fall wäre. „Blur-dann-Farbton-drehen“ sieht anders aus als „Farbton-drehen-dann-unschärfe“, und jetzt können Sie sehen, warum, bevor Sie es versenden.

Laden Sie Ihr eigenes Foto hoch und wenden Sie die neun verkettbaren Funktionen – Unschärfe, Helligkeit, Kontrast, Sättigung, Farbtondrehung, Sepia, Graustufen, Invertieren und Schlagschatten – live als tatsächliche „Filter“-CSS-Deklaration auf ein „<img>“-Element und nicht als simuliertes Farbfeld an. Fügen Sie eine Funktion aus der Auswahl hinzu, ziehen Sie ihre Zeile in der Liste nach oben oder unten, um ihre Position in der Kette zu ändern, passen Sie ihren Schieberegler an und die Vorschau und die kopierbare Zeile „filter: ...;“ werden bei jeder Eingabe aktualisiert. Entfernen Sie einen Schritt mit einer eigenen Schaltfläche direkt in der Zeile.

Eine zweite, kleinere Kette erstellt einen „Hintergrundfilter“-Wert, der auf ein Overlay-Panel über der Vorschau angewendet wird, sodass Sie den Milchglaseffekt – die Technik hinter modernen durchscheinenden Navigationsleisten und modalen Hintergründen – sehen können, ohne die eigene Filterkette des zugrunde liegenden Bildes zu berühren. Dies funktioniert bereits vor dem Hochladen eines Fotos vor dem farbenfrohen Platzhalterhintergrund, sodass Sie in Sekundenschnelle ein mattiertes Panel-Design auswählen können.

Wenn die Vorschau richtig aussieht, kopieren Sie das CSS direkt aus dem Ausgabefeld oder exportieren Sie ein echtes PNG: Dieselbe Filterzeichenfolge wird an die Eigenschaft „ctx.filter“ eines Canvas-2D-Kontexts übergeben – die dieselbe Syntax wie die CSS-Eigenschaft „filter“ verwendet – und die Leinwand wird mit „canvas.toBlob()“ in eine herunterladbare Datei konvertiert. Das exportierte Bild stimmt genau mit der Live-Vorschau überein, da es von derselben Filterzeichenfolge erzeugt wird, die dasselbe Rendering-Grundelement durchläuft. Alles geschieht lokal in Ihrem Browser; Ihr Foto wird nirgendwo hochgeladen.