ZenovayTools

CSS-Filter-Generator

Generieren Sie CSS-Filtereffekte mit Live-Vorschau. Passen Sie Unschärfe, Helligkeit, Kontrast, Graustufen, Farbton-Rotation, Invertierung, Sättigung, Sepia und Schlagschatten an.

Presets

Filters

Blur0px
Brightness100%
Contrast100%
Grayscale0%
Hue Rotate0deg
Invert0%
Opacity100%
Saturate100%
Sepia0%

Preview

Original

Original

Filtered

Filtered
CSS Code
filter: none;

So verwenden Sie CSS-Filter-Generator

  1. 1Passen Sie die Filterregler an (Unschärfe, Helligkeit, Kontrast usw.).
  2. 2Sehen Sie den Effekt auf einem Beispielbild in Echtzeit angewendet.
  3. 3Kombinieren Sie mehrere Filter für komplexe Effekte.
  4. 4Kopieren Sie die generierte CSS-Filter-Eigenschaft.
ZenovayAnalytics

Wissen Sie, was Ihre Besucher wirklich tun.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.
CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.
CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.
CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.

Häufig gestellte Fragen

Was ist die CSS-Filter-Eigenschaft?▾
Die CSS-Filter-Eigenschaft wendet visuelle Effekte wie Unschärfe, Helligkeit, Kontrast und Farbverschiebungen auf Elemente an. Es funktioniert bei jedem Element: Bilder, Divs, Text, Videos, SVGs. Filter werden in der aufgelisteten Reihenfolge angewendet und können kombiniert werden. Unterstützt in allen modernen Browsern seit 2015.
Welche CSS-Filter sind verfügbar?▾
Standardfilter: blur(px), brightness(%), contrast(%), grayscale(%), hue-rotate(deg), invert(%), opacity(%), saturate(%), sepia(%), drop-shadow(x y blur color). Zusätzlich kann url() SVG-Filter für benutzerdefinierte Effekte referenzieren.
Was ist der Unterschied zwischen filter und backdrop-filter?▾
filter wendet Effekte auf das Element selbst und seinen Inhalt an. backdrop-filter wendet Effekte auf den Bereich hinter dem Element an (wird für Glasmorphismus verwendet). Zum Beispiel, filter: blur(5px) verwischt das Element; backdrop-filter: blur(5px) verwischt alles, was durch ein halbtransparentes Element sichtbar ist.
Beeinflussen CSS-Filter die Leistung?▾
Filter lösen GPU-Beschleunigung aus, die für statische Elemente effizient ist, aber bei animierten Elementen teuer sein kann. blur() ist der leistungsintensivste Filter. Best Practices: Vermeiden Sie große Unschärfe-Radien bei großen Elementen, verwenden Sie will-change: filter für Animationen, vermeiden Sie das Filtern von Elementen mit vielen untergeordneten Elementen.
Wie erstelle ich einen Instagram-ähnlichen Filter?▾
Kombinieren Sie mehrere CSS-Filter, um Fotoeffekte zu replizieren. Beispiel "Nashville": brightness(1.1) contrast(1.2) saturate(1.35) sepia(0.25). Beispiel "Clarendon": brightness(1.25) contrast(1.2) saturate(1.35). Stapeln Sie 2-4 Filter und passen Sie Werte an, um einzigartige Looks zu erstellen.