SVG-Filter-Generator
Weichzeichnung, Helligkeit u.a. per Regler einstellen und SVG-Filter-Code erzeugen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit diesem Tool stellen Sie acht Effekte – Weichzeichnung, Helligkeit, Kontrast, Sättigung, Farbtondrehung, Deckkraft, Sepia und Invertierung – per Schieberegler ein und sehen das Ergebnis live an einem Kreis, Rechteck oder Stern. Der fertige Effekt lässt sich sofort als SVG-<filter>-Code samt einsatzbereitem CSS-Snippet kopieren, was für Webdesigner und Frontend-Entwickler nützlich ist, die präzisere Kontrolle als die reine CSS-filter-Eigenschaft benötigen. Alles läuft lokal im Browser, ohne Datenübertragung an einen Server.
Anleitung
- Wählen Sie eine Vorschauform: Kreis, Rechteck oder Stern
- Stellen Sie die Regler für Weichzeichnung, Helligkeit, Kontrast, Sättigung, Farbtondrehung, Deckkraft, Sepia und Invertierung ein
- Beobachten Sie die Live-Aktualisierung der Vorschau oben
- Kopieren Sie den generierten SVG-Filter-Code und fügen Sie ihn in Ihr HTML/CSS ein
FAQ
- Was unterscheidet dies von der CSS-filter-Eigenschaft?
- Ein SVG-<filter> kombiniert Primitive wie feComponentTransfer und feColorMatrix direkt, was eine feinere und flexiblere Steuerung als die CSS-filter-Eigenschaft allein ermöglicht. Der generierte Code wird in CSS als filter: url(#id) angewendet.
- Kann ich den generierten Filter auch auf ein echtes Bild anwenden?
- Ja. Die Vorschau zeigt eine Form, aber sobald Sie den kopierten SVG-Code in Ihr HTML einfügen, können Sie filter: url(#ut-custom-filter) auf ein img-Element oder ein beliebiges anderes Element anwenden, um denselben Effekt zu erzielen.
- Wie setze ich die Werte zurück?
- Klicken Sie auf Zurücksetzen, um alle Regler auf ihre Standardwerte zu bringen (Weichzeichnung 0, Helligkeit/Kontrast/Sättigung/Deckkraft 1, Farbtondrehung/Sepia/Invertierung 0).