SVG-Filter-Generator
Weichzeichnen, Helligkeit und mehr per Regler einstellen und SVG-Filtercode erzeugen
Stellen Sie acht Effekte – Weichzeichnen, Helligkeit, Kontrast, Sättigung, Farbtonrotation, Sepia, Invertierung und Deckkraft – bequem per Schieberegler ein und sehen Sie das Ergebnis sofort in der Vorschau als Kreis, Rechteck oder Stern. Den fertigen Effekt kopieren Sie als <filter>-SVG-Code samt CSS-Beispiel. Das hilft Webdesignern und Frontend-Entwicklern, die präzisere Filter brauchen, als CSS filter allein bietet. Alle Berechnungen laufen im Browser und werden nicht an einen Server übertragen.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Wählen Sie eine Vorschauform: Kreis, Rechteck oder Stern
- Stellen Sie die Regler für Weichzeichnen, Helligkeit, Kontrast, Sättigung, Farbtonrotation, Deckkraft, Sepia und Invertierung ein
- Beobachten Sie in der Vorschau oben, wie die Effekte in Echtzeit greifen
- Kopieren Sie den fertigen SVG-Filtercode und fügen Sie ihn in Ihr HTML/CSS ein
FAQ
- Worin unterscheidet sich das von der CSS-Eigenschaft filter?
- Ein SVG-<filter> kombiniert Primitive wie feComponentTransfer oder feColorMatrix direkt und erlaubt dadurch feinere und flexiblere Kontrolle als CSS filter allein. Den erzeugten Code binden Sie in CSS unverändert über filter: url(#id) ein.
- Kann ich den Filter auch auf echte Bilder anwenden?
- Ja. Die Vorschau zeigt zwar nur eine Form, doch sobald Sie den kopierten SVG-Code in Ihr HTML einfügen, wirkt filter: url(#ut-custom-filter) genauso auf ein img oder jedes andere Element.
- Wie setze ich alle Werte zurück?
- Ein Klick auf „Zurücksetzen“ stellt alle Regler auf die Standardwerte: Weichzeichnen 0, Helligkeit, Kontrast, Sättigung und Deckkraft je 1, Farbtonrotation, Sepia und Invertierung 0.