DeutschDE

CSS-Filter-Generator – Blur, Helligkeit, Graustufen

Bewegen Sie die Schieberegler – Vorschau und Filter-Code ändern sich gleichzeitig.

Ihre Texte und Dateien bleiben in Ihrem Browser – nichts wird an einen Server gesendet.

Datei hierher ziehen oder zum Auswählen klicken
CSS-Code

So funktioniert’s

  1. Ein Beispielbild ist geladen. Um ein eigenes Bild zu verwenden, ziehen Sie es in das Feld darunter.
  2. Bewegen Sie einen Regler oder wählen Sie eine Voreinstellung – der Effekt wird sofort angewendet. Werte, die auf dem Standard bleiben, tauchen im Code nicht auf.
  3. Halten Sie die Schaltfläche mit dem Auge gedrückt, um mit dem ungefilterten Bild zu vergleichen.
  4. Kopieren Sie den CSS-Code oder speichern Sie in unterstützten Browsern mit „Herunterladen“ ein PNG mit angewendetem Filter.

Häufige Fragen

Spielt die Reihenfolge der Filterfunktionen eine Rolle?

Ja. Filter werden von links nach rechts angewendet, eine andere Reihenfolge ergibt also ein anderes Ergebnis. Dieses Tool schreibt sie immer in derselben Reihenfolge.

Was ist der Unterschied zwischen drop-shadow und box-shadow?

box-shadow zeichnet einen Schatten um den rechteckigen Rahmen des Elements, drop-shadow folgt dagegen der tatsächlich sichtbaren Form und lässt transparente Bereiche aus. Das passt ideal zu transparenten PNGs und Icons.

Warum gibt es keine Schaltfläche „Herunterladen“?

Sie wird in Browsern ausgeblendet, die keine Canvas-Filter unterstützen, etwa in manchen Safari-Versionen. Den CSS-Code können Sie trotzdem kopieren und verwenden.

Ähnliche Tools

CSS-FarbverlaufLineare, radiale und konische VerläufeSchwarz-Weiß-FotoGraustufen, Sepia und NegativBildkonverterJPG, PNG und WebP umwandelnASCII-Art-GeneratorText und Fotos als Zeichenkunst

Alle Tools