CSS ist 2026 das neue Photoshop — für viele Aufgaben

Vor fünf Jahren brauchte man für jeden Bild-Effekt eine eigene PNG-Variante. Heute erledigen sieben CSS-Eigenschaften, was früher Photoshop-Layer und Asset-Pipelines gebraucht hat: filter, backdrop-filter, mix-blend-mode, mask-image, clip-path, object-fit und color-mix(). Alle sind 2026 in jedem Mainstream-Browser stabil.

1. filter — Bild-Effekte direkt

filter wendet SVG-ähnliche Effekte auf jedes Element an: Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Saturate, Sepia, Drop-Shadow.

/* Hover-Effekt für Galerie */
.gallery img {
  filter: grayscale(0.4) saturate(0.8);
  transition: filter 0.3s;
}
.gallery img:hover {
  filter: grayscale(0) saturate(1.2);
}

/* Drop-Shadow ohne Pseudo-Element */
.logo {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

Wichtig: filter wird GPU-beschleunigt, also performant. Aber: das Element wird zu einem eigenen Compositing-Layer, was bei vielen Elementen Memory kostet.

2. backdrop-filter — der Frosted-Glass-Effekt

Statt das Element selbst zu filtern, filtert backdrop-filter alles hinter dem Element. Das ist der berühmte iOS-Frosted-Glass-Look:

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Browser-Unterstützung: Safari seit 2017 (Pioniere), Chrome seit 2018, Firefox erst seit 103 (2022). 2026 universell ohne Vendor-Prefix nutzbar — der-webkit--Prefix bleibt für ältere Safari-Versionen.

3. mix-blend-mode — Photoshop-Blend-Modes im Browser

mix-blend-mode bringt die klassischen Photoshop-Blend-Modes (siehe unseren Lexikon-Eintrag) ins CSS:

/* Text über Foto mit Multiply für satte Lesbarkeit */
.hero-title {
  color: #d4a017;
  mix-blend-mode: multiply;
}

/* Logo-Knockout-Effekt */
.brand-overlay {
  background: white;
  mix-blend-mode: difference;
}

16 Blend-Modes verfügbar: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, normal.

4. mask-image — Bild-Form ändern

mask-image (siehe Lexikon-Eintrag) verwendet ein SVG oder PNG als Sichtbarkeits-Maske:

/* Bild in Sternform */
.star-photo {
  mask-image: url("star.svg");
  mask-size: cover;
  mask-position: center;
}

/* Verlauf-Maske (Fade-Out) */
.fade-edges {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
}

Großer Vorteil gegenüber transparenten PNGs: ein einziges Bild reicht, die Form steckt im CSS. Für Theme-spezifische Masken einfach das CSS ändern, das Bild bleibt.

5. clip-path — geometrische Crops ohne Bild-Eingriff

clip-path schneidet ein Element nach einer geometrischen Form:

/* Diagonale Hero-Section */
.hero-image {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* Kreis-Avatar */
.avatar {
  clip-path: circle(50%);
}

/* Custom SVG-Pfad */
.custom-shape {
  clip-path: path("M0,0 L100,0 L100,100 Z");
}

Unterschied zu mask-image: clip-path arbeitet mit Geometrie (Pfade, Polygone), mask-image mit Bitmap- oder SVG-Helligkeit. Für einfache Formen ist clip-path performanter.

6. object-fit — Bild-Skalierung im Container

object-fit kontrolliert, wie ein Bild seinen Container füllt — wichtig für Galerien mit einheitlichen Tile-Größen:

.tile img {
  width: 100%;
  height: 240px;
  object-fit: cover;        /* füllt, beschneidet wenn nötig */
  object-position: center;  /* welcher Crop-Punkt */
}

/* Andere Werte: */
/* contain — passt rein, schwarze Balken möglich */
/* fill — verzerrt (selten gewollt) */
/* none — Original-Größe */
/* scale-down — kleiner von "none" und "contain" */

object-position akzeptiert die gleichen Werte wie background-position: prozentual, in Pixel, mit Schlüsselworten wie top right.

7. color-mix() — Farb-Interpolation im CSS

Seit 2023 in allen Mainstream-Browsern: color-mix() mischt Farben in beliebigen Color-Spaces. Praktisch für Overlay-Effekte über Bildern:

/* Dynamischer Overlay-Tönung */
.hero {
  background-image: url("foto.webp");
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--accent) 30%, transparent);
}

Color-Spaces verfügbar: srgb, display-p3, oklch, oklab, lab, lch, hsl. oklch liefert die wahrnehmungs-genauesten Mischungen.

Container-Queries für Bilder

Seit 2023 stabil: Container-Queries erlauben es, Bild-Layouts an die Container-Breite anzupassen, nicht an die Viewport-Breite:

.product-card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card img {
    aspect-ratio: 16 / 9;
  }
}

@container (max-width: 399px) {
  .product-card img {
    aspect-ratio: 1 / 1;
  }
}

Damit kann eine Komponente in der Sidebar (schmal) und im Main (breit) andere Bild-Verhältnisse zeigen — ohne JavaScript.

Performance-Implikationen

Die meisten dieser Eigenschaften laufen GPU-beschleunigt. Drei Punkte zur Achtsamkeit:

  • Compositing-Layer-Explosion. Jeder filter erzeugt einen eigenen Layer. Bei 100 Bildern in einer Galerie kann das Memory eng werden. Lösung: will-change: filter nur bei aktiv animierten Elementen.
  • backdrop-filter ist teuer. Re-Compositing bei jedem Scroll. Vermeide es bei großen Bereichen — kleine Karten sind ok.
  • mix-blend-mode triggert Layer-Promotion. Wie filter: sparsam nutzen.

Accessibility

CSS-Effekte können Kontrast verschlechtern. Drei Regeln:

  • Text über gefilterten Bildern: WCAG-Kontrast trotzdem messen — der Effekt zählt für den Browser nicht als „Override".
  • prefers-reduced-motion respektieren, wenn Filter animiert werden.
  • prefers-contrast: more kann Filter komplett zurücknehmen: .photo { filter: none; }.

Wann CSS, wann Bild-Asset?

  • Hover-Effekte, Theme-Adaption, dynamische Overlays: CSS.
  • Brand-spezifische Logos mit komplexen Effekten: SVG mit CSS-Tönung.
  • Photo-Bearbeitung (Belichtung, Weißabgleich): in der Quelle. CSS kann das technisch, das Ergebnis ist aber selten so gut wie eine echte Photoshop/Lightroom-Anpassung.
  • Komplexe Composite-Effekte: als separates Asset rendern.

Quellen

MDN — CSS filter · MDN — backdrop-filter · MDN — mix-blend-mode · MDN — mask-image · MDN — clip-path · MDN — object-fit · MDN — color-mix() · MDN — Container Queries.