CSS-Filter-Generator — Kostenlos Online
Erzeugen Sie CSS-Filtereffekte mit Live-Vorschau.
'/%3E%3Ccircle cx='200' cy='150' r='70' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
Who uses the CSS-Filter-Generator?
- Frontend-Entwickler, die Bildfilterkombinationen vor der Anwendung in einem Projekt in der Vorschau ansehen.
- UI-Designer, die Hover-Zustand-visuelle Effekte und Farbthemen in CSS prototypisieren.
- Webentwickler, die erkunden, wie Helligkeits-/Kontrast-/Sättigungsfilter zusammenwirken, bevor sie das finale CSS schreiben.
How the CSS-Filter-Generator works
Das Tool lädt mit einem eingebauten Beispiel-Verlaufsbild — es gibt keine Upload-Option.
Passen Sie Filterregler an: Helligkeit, Kontrast, Sättigung (0–200%), Farbton-Drehung (0–360°), Weichzeichnung (0–20px), Graustufen, Sepia, Invertierung (0–100%).
Kombinieren Sie mehrere Filter, um den gewünschten Effekt zu erzielen; klicken Sie auf Reset, um alle Regler auf Standard zurückzusetzen.
Kopieren Sie die CSS-filter-Eigenschaft aus dem Ausgabefeld zur Verwendung in Ihrem Projekt.
Tips & tricks
- Es gibt keinen Bild-Upload — testen Sie Filterkombinationen an der eingebauten Vorschau und kopieren Sie dann das CSS zur Anwendung auf Ihr echtes Bild.
- Filter, die auf ihrem Standardwert belassen werden (100% Helligkeit, 0 Weichzeichnung usw.), werden automatisch aus der Ausgabe weggelassen, wodurch das generierte CSS minimal bleibt.
- opacity() und drop-shadow() sind hier nicht als Regler enthalten — fügen Sie sie bei Bedarf manuell zum kopierten filter-Wert hinzu.
- Klicken Sie auf Reset, um sofort jeden Regler auf seinen Standardwert zurückzusetzen und von vorne zu beginnen.
Frequently Asked Questions
Welche CSS-Filter generiert dieses Tool?
Acht Filter: brightness(), contrast(), saturate(), hue-rotate(), blur(), grayscale(), sepia() und invert(). Alle werden in dieser Reihenfolge zu einer filter-Eigenschaft kombiniert, wobei auf dem Standardwert (No-Op) belassene Filter übersprungen werden.
Kann ich mein eigenes Bild hochladen, um Filter zu testen?
Derzeit nicht — die Vorschau verwendet ein festes, eingebautes Verlaufsbild. Kopieren Sie das generierte Filter-CSS und wenden Sie es in Ihrem Projekt auf Ihr eigenes Bild an, um es an echtem Inhalt zu sehen.
Wie wende ich einen CSS-Filter auf ein Bild bei Hover an?
Fügen Sie den Filter bei :hover hinzu: .image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } Dies erzeugt sanfte Filterübergänge bei Mausüberfahrt.
Was ist der Unterschied zwischen box-shadow und dem drop-shadow-Filter?
box-shadow gilt für die Box des Elements (Rechteck). Der drop-shadow()-Filter folgt der tatsächlichen Alpha-Form des Elements — perfekt für PNG-Bilder mit Transparenz, bei denen der Schatten der Bildkontur folgen soll. Dieses Tool enthält keinen drop-shadow-Regler; fügen Sie ihn bei Bedarf manuell zum kopierten CSS hinzu.
Können CSS-Filter animiert werden?
Ja. CSS-Filter sind mit Übergängen und Keyframe-Animationen animierbar: @keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
Is my data safe when using the CSS-Filter-Generator?
Completely safe. The CSS-Filter-Generator processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS-Filter-Generator output in commercial projects?
Yes. The CSS-Filter-Generator is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS-Filter-Generator follow official standards?
Yes. The CSS-Filter-Generator is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.