CSS-Filter-Generator (filter) für Bilder
Wähle ein Foto oder nutze das Beispiel und bewege die Regler. Das Originalfoto ändert sich nicht: Der Effekt wird vom Browser angewendet.
So geht’sFotoeffekte direkt im CSS
Verfügbar auf: 
CSS-Filter-Generator (filter) für Bilder: wofür es gut ist
Die CSS-Eigenschaft filter wendet Fotoeffekte an, ohne die Datei zu bearbeiten. Wähle ein Foto und passe Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Farbton, Invertierung, Unschärfe, Deckkraft und den Schatten an, der der Kontur folgt (drop-shadow).
Beginne mit einem der fertigen Filter (Schwarz-Weiß, Vintage, kalt, warm, verblasst, lebendig, nächtlich), kopiere das CSS oder lade das Bild mit angewendetem Filter herunter. Die Hover-Option erzeugt den klassischen Effekt des Fotos, das beim Darüberfahren mit der Maus wieder normal wird, mit einem Übergang, der beachtet, wer weniger Bewegung wünscht.
So geht’s
- Wähle das Foto oder nutze das Beispiel.
- Passe die Regler an oder wähle einen fertigen Filter.
- Kopiere das CSS oder lade das Bild herunter.
Wann nutzen
- Teamfotos in Schwarz-Weiß.
- Galerie mit Effekt beim Darüberfahren mit der Maus.
- Logos mit Schatten an der Kontur.
Häufige Fragen
Was ist der Vorteil von filter gegenüber dem Bearbeiten des Fotos?
Dasselbe Foto dient für mehrere Effekte, und die Änderung lässt sich animieren, etwa ein Schwarz-Weiß-Foto, das beim Darüberfahren mit der Maus farbig wird. Du musst keine Version pro Effekt speichern.
Spielt die Reihenfolge der Filter eine Rolle?
Ja. Die Filter werden von links nach rechts angewendet, und jeder arbeitet mit dem Ergebnis des vorherigen. Deshalb ergibt Sepia gefolgt von einer Farbtonänderung ein anderes Ergebnis als die umgekehrte Reihenfolge.
Was ist der Unterschied zwischen drop-shadow und box-shadow?
box-shadow zeichnet den Schatten des Rechtecks des Bildes. drop-shadow, das ein Filter ist, folgt der Kontur dessen, was sichtbar ist, und funktioniert daher mit PNG und SVG mit transparentem Hintergrund, wie Logos und Freisteller.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.