Filter

CSS Filter sind eine leistungsstarke Funktion in CSS, die es ermöglicht, visuelle Effekte auf Elemente (wie Bilder, Hintergründe oder ganze Div-Container) anzuwenden, ohne die ursprüngliche Datei bearbeiten zu müssen. Diese Effekte werden vom Browser in Echtzeit gerendert.

Grundlegende Funktionsweise

Filter werden mit der filter-Eigenschaft in CSS angewendet. Die Syntax lautet:

.element {
  filter: filter-funktion(wert);
}

.element {
  filter: filter-funktion(wert);
}

Sie können auch mehrere Filter kombinieren:

.element {
  filter: filter1(wert1) filter2(wert2) filter3(wert3);
}

.element {
  filter: filter1(wert1) filter2(wert2) filter3(wert3);
}

Verfügbare Filterfunktionen

blur() – Weichzeichner-Effekt

Wendet einen Gaußschen Weichzeichner auf das Element an.

Beispiel:

.blur-effect {
  filter: blur(5px);
}

.blur-effect {
  filter: blur(5px);
}

Wert: Der Radius der Unschärfe in Pixeln. Je höher der Wert, desto stärker die Unschärfe.

brightness() – Helligkeitsanpassung

Passt die Helligkeit eines Elements an.

Beispiel:

.bright-image {
  filter: brightness(150%);
}
.dark-image {
  filter: brightness(50%);
}

.bright-image {
  filter: brightness(150%);
}
.dark-image {
  filter: brightness(50%);
}

Wert: Prozentualer Wert (100% = Original, 0% = komplett schwarz)

contrast() – Kontrastanpassung

Regelt den Kontrast des Elements.

Beispiel:

.high-contrast {
  filter: contrast(200%);
}
.low-contrast {
  filter: contrast(50%);
}

.high-contrast {
  filter: contrast(200%);
}
.low-contrast {
  filter: contrast(50%);
}

Wert: Prozentualer Wert (100% = Original)

drop-shadow() – Schlagschatten

Erzeugt einen Schlagschatten hinter dem Element (ähnlich wie box-shadow, aber für nicht-rechteckige Formen geeignet).

Beispiel:

.shadow-effect {
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

.shadow-effect {
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

Werte: horizontaler Offset, vertikaler Offset, Unschärferadius, Farbe

grayscale() – Graustufen

Wandelt das Element in Graustufen um.

Beispiel:

.black-white {
  filter: grayscale(100%);
}
.partial-gray {
  filter: grayscale(50%);
}

.black-white {
  filter: grayscale(100%);
}
.partial-gray {
  filter: grayscale(50%);
}

Wert: Prozentualer Wert (0% = Original, 100% = komplett grau)

hue-rotate() – Farbtonrotation

Rotiert den Farbton aller Pixel im Element.

Beispiel:

.color-shift {
  filter: hue-rotate(90deg);
}

.color-shift {
  filter: hue-rotate(90deg);
}

Wert: Gradwert (0deg = Original, 360deg = volle Rotation)

invert() – Farbumkehrung

Invertiert die Farben des Elements.

Beispiel:

.inverted {
  filter: invert(100%);
}
.partial-invert {
  filter: invert(50%);
}

.inverted {
  filter: invert(100%);
}
.partial-invert {
  filter: invert(50%);
}

Wert: Prozentualer Wert (0% = Original, 100% = komplett invertiert)

opacity() – Transparenz

Passt die Deckkraft des Elements an (ähnlich wie die opacity-Eigenschaft, aber als Filter).

Beispiel:

.semi-transparent {
  filter: opacity(50%);
}

.semi-transparent {
  filter: opacity(50%);
}

Wert: Prozentualer Wert (100% = voll deckend, 0% = voll transparent)

saturate() – Sättigung

Regelt die Farbsättigung des Elements.

Beispiel:

.high-saturation {
  filter: saturate(200%);
}
.desaturated {
  filter: saturate(50%);
}

.high-saturation {
  filter: saturate(200%);
}
.desaturated {
  filter: saturate(50%);
}

Wert: Prozentualer Wert (100% = Original)

sepia() – Sepia-Effekt

Wendet einen Sepia-Filter an, der dem Element ein altmodisches Aussehen verleiht.

Beispiel:

.old-photo {
  filter: sepia(100%);
}

.old-photo {
  filter: sepia(100%);
}

Wert: Prozentualer Wert (0% = Original, 100% = voller Sepia-Effekt)

Kombination von Filtern

Filter können kombiniert werden, um komplexe Effekte zu erzielen:

Beispiel:

.vintage-effect {
  filter: sepia(80%) brightness(90%) contrast(120%) hue-rotate(-10deg);
}

.vintage-effect {
  filter: sepia(80%) brightness(90%) contrast(120%) hue-rotate(-10deg);
}

Performance-Überlegungen

Während CSS-Filter sehr nützlich sind, sollten sie mit Bedacht eingesetzt werden:
• Filter können die Rendering-Performance beeinträchtigen, besonders bei Animationen oder auf großen Elementen
• Hardware-Beschleunigung (z.B. mit transform: translateZ(0)) kann helfen
• Für statische Effekte ist manchmal die Vorverarbeitung der Bilder effizienter

Browser-Support

CSS Filter werden von allen modernen Browsern unterstützt (ab IE Edge, Firefox 35+, Chrome 18+, Safari 6+). Für ältere Browser können Fallbacks oder Polyfills verwendet werden.

Praxisbeispiel: Hover-Effekte

.gallery-image {
  transition: filter 0.3s ease;
  filter: brightness(100%) contrast(100%);
}

.gallery-image:hover {
  filter: brightness(120%) contrast(110%) drop-shadow(0 0 8px rgba(0,0,0,0.3));
}

.gallery-image {
  transition: filter 0.3s ease;
  filter: brightness(100%) contrast(100%);
}

.gallery-image:hover {
  filter: brightness(120%) contrast(110%) drop-shadow(0 0 8px rgba(0,0,0,0.3));
}

Dieser Code erzeugt einen subtilen Hover-Effekt, der das Bild aufhellt, den Kontrast leicht erhöht und einen Schatten hinzufügt.