CSS is the new Photoshop in 2026 — for many tasks
Five years ago every image effect needed its own PNG variant. Today, seven CSS properties do what used to require Photoshop layers and asset pipelines: filter, backdrop-filter, mix-blend-mode, mask-image, clip-path, object-fit, and color-mix(). All are stable in every mainstream browser in 2026.
1. filter — image effects directly
filter applies SVG-like effects to any element: blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, drop-shadow.
/* Hover effect for a gallery */
.gallery img {
filter: grayscale(0.4) saturate(0.8);
transition: filter 0.3s;
}
.gallery img:hover {
filter: grayscale(0) saturate(1.2);
}
/* Drop-shadow without a pseudo-element */
.logo {
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}Important: filter is GPU-accelerated, so performant. But: the element becomes its own compositing layer, which costs memory with many elements.
2. backdrop-filter — the frosted-glass effect
Instead of filtering the element itself, backdrop-filter filters everything behind the element. That's the famous 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 support: Safari since 2017 (the pioneer), Chrome since 2018, Firefox only since 103 (2022). In 2026 usable universally without a vendor prefix — the -webkit- prefix remains for older Safari versions.
3. mix-blend-mode — Photoshop blend modes in the browser
mix-blend-mode brings the classic Photoshop blend modes (see our glossary entry) into CSS:
/* Text over a photo with multiply for rich legibility */
.hero-title {
color: #d4a017;
mix-blend-mode: multiply;
}
/* Logo knockout effect */
.brand-overlay {
background: white;
mix-blend-mode: difference;
}16 blend modes available: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, normal.
4. mask-image — change the image shape
mask-image (see glossary entry) uses an SVG or PNG as a visibility mask:
/* Image in a star shape */
.star-photo {
mask-image: url("star.svg");
mask-size: cover;
mask-position: center;
}
/* Gradient mask (fade-out) */
.fade-edges {
mask-image: linear-gradient(
to right,
transparent,
black 20%,
black 80%,
transparent
);
}Big advantage over transparent PNGs: a single image is enough, the shape lives in the CSS. For theme-specific masks, just change the CSS, the image stays.
5. clip-path — geometric crops without touching the image
clip-path clips an element to a geometric shape:
/* Diagonal hero section */
.hero-image {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
/* Circle avatar */
.avatar {
clip-path: circle(50%);
}
/* Custom SVG path */
.custom-shape {
clip-path: path("M0,0 L100,0 L100,100 Z");
}Difference from mask-image: clip-path works with geometry (paths, polygons), mask-image with bitmap or SVG brightness. For simple shapes, clip-path is more performant.
6. object-fit — image scaling inside the container
object-fit controls how an image fills its container — important for galleries with uniform tile sizes:
.tile img {
width: 100%;
height: 240px;
object-fit: cover; /* fills, crops if needed */
object-position: center; /* which crop point */
}
/* Other values: */
/* contain — fits in, black bars possible */
/* fill — distorts (rarely wanted) */
/* none — original size */
/* scale-down — smaller of "none" and "contain" */object-position accepts the same values as background-position: percentages, pixels, keywords like top right.
7. color-mix() — color interpolation in CSS
In all mainstream browsers since 2023: color-mix() mixes colors in any color space. Handy for overlay effects over images:
/* Dynamic overlay tint */
.hero {
background-image: url("photo.webp");
position: relative;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: color-mix(in oklch, var(--accent) 30%, transparent);
}Color spaces available: srgb, display-p3, oklch, oklab, lab, lch, hsl. oklch delivers the most perceptually accurate mixes.
Container queries for images
Stable since 2023: container queries let you adapt image layouts to the container width, not the viewport width:
.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;
}
}This lets one component show different image ratios in the sidebar (narrow) and in the main area (wide) — without JavaScript.
Performance implications
Most of these properties run GPU-accelerated. Three points to watch:
- Compositing-layer explosion. Every
filtercreates its own layer. With 100 images in a gallery, memory can get tight. Solution:will-change: filteronly on actively animated elements. - backdrop-filter is expensive. Re-compositing on every scroll. Avoid it on large areas — small cards are fine.
- mix-blend-mode triggers layer promotion. Like
filter: use sparingly.
Accessibility
CSS effects can worsen contrast. Three rules:
- Text over filtered images: measure WCAG contrast anyway — the effect doesn't count as an "override" for the browser.
- Respect
prefers-reduced-motionwhen filters are animated. prefers-contrast: morecan remove filters entirely:.photo { filter: none; }.
When CSS, when an image asset?
- Hover effects, theme adaptation, dynamic overlays: CSS.
- Brand-specific logos with complex effects: SVG with CSS tinting.
- Photo editing (exposure, white balance): in the source. CSS can do it technically, but the result is rarely as good as a real Photoshop/Lightroom adjustment.
- Complex composite effects: render as a separate asset.
Sources
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.