Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Mit Hilfe von CSS-Filter-Effekten können die Elemente einer Website gestalterisch manipuliert werden. Ihr könnt z. B. Bilder in ihrer Farbe verändern, Schatten hinzufügen, die Deckkraft reduzieren oder Bilder und Texte weichzeichnen. In Kombination mit CSS Blend Modes stehen uns somit Photoshop-ähnliche Techniken im Browser zur Verfügung. Da CSS Filter mittlerweile in allen modernen Browser (außer dem IE) zur Verfügung stehen, möchte ich in diesem Beitrag die Funktionsweise kurz zusammenfassen.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Funktionsweise von CSS-Filtern

CSS Filter lassen sich sowohl auf Grafiken im HTML-Markup (<img>) als auch auf CSS-Hintergründe (background-image:url(…);) Texte, CSS-Elemente, SVG-Grafiken und Videos (<video>) anwenden. Es stehen nachfolgende Filter zur Verfügung.

Live-Beispiele aller Filter anzeigen

blur(Radius) – Weichzeichner

Mit dem blur()-Filter kann ein Gaußscher Weichzeichner angewendet werden. Je höher der Radius, desto stärker wird das Bild weichgezeichnet.

CSS-Filter blur()
CSS-Filter blur()
.blur {
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

brightness(Wert) – Helligkeit

Mit dem brightness()-Filter kann ein Bild in der Helligkeit verändert werden. Ein Wert von 1 entspricht dem Standard. Werte unter 1 (z. B. 0.5) dunkeln das Bild ab, Werte über 1 (z. B. 1.5) hellen das Bild auf.

Der CSS-Filter brightness()
Der CSS-Filter brightness()
.brightness {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}

contrast(Wert) – Kontrast

Mit dem contrast()-Filter wird der Kontrast eines Bildes verändert. Ein Wert unter 1 reduziert den Kontrast, ein Wert über 1 erhöht ihn.

Der CSS-Filter contrast()
Der CSS-Filter contrast()
.contrast {
    -webkit-filter: contrast(2);
    filter: contrast(2);
}

drop-shadow(X, Y, Weichzeichnung, Farbe) – Schlagschatten

Mit dem drop-shadow()-Filter kann einem Bild ein Schlagschatten hinzugefügt werden. Der Filter funktioniert ähnlich wie die box-shadow-Eigenschaft und führt folglich auch zu einem vergleichbaren visuellen Ergebnis. Allerdings erkennt der Filter Transparenzen in PNGs, so dass nur opake Bildbereiche einen Schatten werfen.

Der CSS-Filter drop-shadow()
Der CSS-Filter drop-shadow()
.drop-shadow {
    -webkit-filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
    filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
}

grayscale(wert) – Graustufe

Mit dem grayscale()-Filter kann ein Bild in Graustufen dargestellt werden. Ein Wert von 1 entspricht 100%.

Der CSS-Filter grayscale()
Der CSS-Filter grayscale()
.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

hue-rotate(winkel) – Winkel im Farbkreis

Mit dem hue-rotate()-Filter kann der Farbwinkel des Bildes gedreht werden. Ein Wert von 0° lässt das Bild unverändert, der maximale Winkel beträgt 360°.

Der CSS-Filter hue-rotate()
Der CSS-Filter hue-rotate()
.hue-rotate {
    -webkit-filter: hue-rotate(45deg);
    filter: hue-rotate(45deg);
}

invert(wert) – Invertieren

Mit dem invert()-Filter können die Farben des Bildes umgekehrt werden. Ein Wert von 1 kehrt die Farben vollständig um.

Der CSS-Filter invert()
Der CSS-Filter invert()
.invert {
    -webkit-filter: invert(1);
    filter: invert(1);
}

opacity(wert) – Deckkraft/Opazität

Mit dem opacity()-Filter kann ein Bild transparent dargestellt werden. Ein Wert von 1 lässt das Bild verschwinden. Der Filter funktioniert exakt wie die opacity-Eigenschaft von CSS.

Der CSS-Filter opacity()
Der CSS-Filter opacity()
.opacity {
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
}

saturate(wert) – Sättigung

Mit dem saturate()-Filter kann die Sättigung eines Bildes erhöht oder verringert werden. Werte über 1 erhöhen die Sättigung, Werte zwischen 1 und 0 verringern sie.

Der CSS-Filter saturate()
Der CSS-Filter saturate()
.saturate {
    -webkit-filter: saturate(2);
    filter: saturate(2);
}

sepia(wert) – Sepiafarben

Der Filter sepia() färbt das Bild in Sepiafarben um. Ein Wert von 1 entspricht einer Sepia-Färbung von 100%.

Der CSS-Filter sepia()
Der CSS-Filter sepia()
.sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

Kombinierte Filter

CSS-Filter können auch kombiniert werden. Die einzelnen Filter werden dabei ohne Komma direkt nacheinander notiert. Mit Filterkombinationen sind beispielsweise Einfärbungen des Bildes, dezente Korrekturen oder Instagram-ähnliche Effekte möglich.

Kombinierte CSS-Filter sepia() und hue-rotate()
Kombinierte CSS-Filter sepia() und hue-rotate()
.sepia-hue-rotate {
    -webkit-filter: sepia(1) hue-rotate(120deg);
    filter: sepia(1) hue-rotate(120deg);
}
Kombinierte CSS-Filter sepia(), hue-rotate() und blur()
Kombinierte CSS-Filter sepia(), hue-rotate() und blur()
.sepia-hue-rotate-blur {
    -webkit-filter: sepia(.9) hue-rotate(280deg) blur(2px);
    filter: sepia(.9) hue-rotate(280deg) blur(2px);
}
Kombinierte CSS-Filter brightness() und contrast()
Kombinierte CSS-Filter brightness() und contrast()
.brightness-contrast {
	-webkit-filter: brightness(1.1) contrast(1.3);
	filter: brightness(1.1) contrast(1.3);
}

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-filters feature across the major browsers from caniuse.com

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 18 Kommentare

  1. Michael Wiesner
    schrieb am 29.04.2020 um 15:25 Uhr:

    Tolle Zusammenstellung und gut erklärt! Herzlichen Dank für diese Arbeit.

    Antworten
  2. Ronny
    schrieb am 06.06.2017 um 16:17 Uhr:

    Hallo,

    super Artikel. Danke für die Hilfestellung.

    Weiß eventuell Jemand ob man mit CSS den Hintergrund einfärben kann? Ich baue gerade eine Community Seite, wo die User Profilbilder hochladen können sollen. Nun würde ich gern die Profilbilder auf weißem Hintergrund darstellen, aber wenn möglich nur die Person selbst, ohne störende Faktoren. Rein das Gesicht / die Person.

    Klingt so als würde ich nicht drum herum kommen die Bilder einzeln zu bearbeiten. Wäre natürlich ein mega Aufwand :/ Aber vielleicht gibt es ja was in Zeiten von CSS.

    Transparenz hilft übrigens nicht so gut, sieht leider blöd aus. Hab ich schon getestet.

    Danke
    Ronny

    Antworten
  3. Monika
    schrieb am 24.04.2017 um 20:51 Uhr:

    Nochmals hallo,

    mit den von Euch aufgeführten Filtern hat der Firefox offenbar keine Probleme (ff ist mein Standardbrowser). Es gibt ja aber auch Filter, wie z.B. „glow“. Diese setzt der ff nicht um. Kennt Ihr vielleicht hierfür eine Alternative? Auch der Zusatz -moz oder -mox hilft hier nicht weiter.

    LG Monika

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 25.04.2017 um 07:23 Uhr:

      Hallo Monika, glow() ist kein gültiger CSS Filter, sondern ein von Microsoft seinerzeit »erfundener« Filter. Er funktioniert daher nicht im IE und wahrscheinlich auch in keinem anderen Browser außer dem Internet Explorer. Du kannst den gewünschten Effekt mit text-shadow realisieren.

      Antworten
      • Monika
        schrieb am 25.04.2017 um 10:38 Uhr:

        Hallo Jonas,

        vielen Dank für Deinen Tipp – das werde ich gleich ausprobieren.

        Schönen Tag noch und LG von Monika

      • Monika
        schrieb am 30.04.2017 um 20:17 Uhr:

        Hallo Jonas,

        Dein Tipp „glow“ mit text-shadow zu realisieren, war goldrichtig, genau das, was ich für mein Projekt gebraucht habe – nochmals vielen Dank dafür. Ich bin ganz überrascht, was für irre Effekte sich hiermit erzielen lassen. „glow“ ist es letztendlich nicht geworden, weil es Besseres gibt. Falls es Dich oder einen Deiner Leser interessiert, hier der Link http://dreamsky.xobor.de/t11f5-Der-Weg-zur-Regenbogenbruecke.html#msg2 (Titel mit text-shadow).

        Noch einen schönen Feiertag und LG von Monika

  4. Monika
    schrieb am 24.04.2017 um 17:37 Uhr:

    Hallo,

    super Beitrag, vielen lieben Dank dafür. Bin leider erst jetzt hierauf gestoßen, viel zu spät. Hatte immer das Problem, daß durch Größenveränderungen Bilder unscharf wurden oder Farben darunter litten. Die Bilder mußten dann immer umständlich am PC nachbearbeitet und wieder erneut hochgeladen werden. Das gehört nun der Vergangenheit an. Und die Funktion „opacity“ erforderte leider immer zusätzlich „position: absolute“. Mit Euren Filtern ist das alles viel einfacher.

    Vielen Dank und liebe Grüße

    Monika

    Antworten
  5. Nikolaus
    schrieb am 02.02.2017 um 14:24 Uhr:

    Ich arbeite an einer Online-Hilfe mit Druckausgabe und hatte das Problem, dass ich die Icons, die weiß auf blauem Hintergrund in der Bildschirmdarstellung erscheinen, in der Druckausgabe mit weißer Hintergrundfarbe logischerweise nur sehr schwach umrandet sehen konnte.
    Mit Euren Filtern (invert) habe ich die Lösung gefunden.
    Vielen Dank

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 02.02.2017 um 15:23 Uhr:

      Bedenke aber, dass im IE die Filter nicht zwingend funktionieren.

      Antworten
  6. Bogdan
    schrieb am 30.03.2015 um 20:28 Uhr:

    super vielen dank,

    sehr interessant
    ich arbeite an ein Widget für Adobe Muse und dein Artikel hat mich sehr geholfen

    Antworten
  7. Marcus
    schrieb am 18.03.2015 um 14:22 Uhr:

    Hallo,
    danke für diesen interessanten Beitrag.
    Die CSS Filter sind wirklich eine tolle Möglichkeit zur Darstellung von z. B. Thumbnails auf Webseiten. In Kombination mit den richtigen Hover-Effekten lassen sich damit richtig schöne Dinge zaubern.

    Schönen Gruß
    Marcus

    Antworten
  8. Karo
    schrieb am 18.03.2015 um 13:44 Uhr:

    Interessant! Das erleichtert so einiges *-*
    Und nur weil es von IE noch nicht unterstützt wird, ist es doch nicht gleich ein Fail @oliver :)

    Antworten
  9. Daniele De Rosa
    schrieb am 16.03.2015 um 08:55 Uhr:

    Schöner Artikel! Richtig interessant wird der Einsatz dieser Methode bei Hover-Effekten. Da finde ich´s im Grunde auch eher von sekundärer Bedeutung, dass sie vom IE noch nicht unterstützt wird.

    Viele Grüße!

    Antworten
  10. oliver
    schrieb am 15.03.2015 um 17:34 Uhr:

    Tolle Sache – wird nur leider nicht vom IE unterstützt. Das Polyfill arbeitet nur im IE7-9, ist insofern auch keine Lösung — > Fail :(

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 15.03.2015 um 18:19 Uhr:

      Ja das mit dem IE ist bedauerlich. Aber wenn man es gestalterisch geschickt anstellt, kann man dem IE häufig eine gute Fallback-Lösung anbieten.

      Antworten
    • CodeMonkey
      schrieb am 10.04.2017 um 08:37 Uhr:

      Du siehst das Falsch, der IE ist fail.

      Antworten
      • Jonas Hellwig (Autor)
        schrieb am 12.04.2017 um 08:18 Uhr:

        Das der IE keine Filter unterstützt hat ja nichts damit zu tun, dass man nicht trotzdem eine gute Fallback-Lösung bauen kann.

Schreibe einen Kommentar zu Karo Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →