Filtros y mezclas

Lección 17 de 37 · 5 min

Brillo, contraste, desenfoque, un vidrio esmerilado, tintas que se superponen: muchas cosas que antes se resolvían en un editor de fotos hoy son una línea de CSS, y se pueden cambiar en vivo.

Funciones de filter

filter procesa los píxeles ya dibujados del elemento, con todo lo que tiene adentro. Recibe una lista de funciones separadas por espacios:

Desenfoqueblur(4px)Es el único valor en longitud y no acepta porcentajes.
Luz y colorbrightness() · contrast() · saturate()100% deja la imagen igual; menos baja, más sube.
Tonosgrayscale() · sepia() · invert()De 0% (nada) a 100% (del todo).
Girohue-rotate(90deg)Gira todos los tonos por la rueda de color.
Y ademásopacity() · drop-shadow()opacity() funciona como la propiedad, y drop-shadow() se ve más abajo.

El orden importa: cada función trabaja sobre el resultado de la anterior, de izquierda a derecha. Si el sepia va al final, pisa el giro de tono; si va primero, el giro tiñe el sepia.

foto.css

1/* marrón: sepia pisa el giro */
2.foto { filter: hue-rotate(90deg) sepia(100%); }
3
4/* verdoso: el giro tiñe el sepia */
5.foto-verde { filter: sepia(100%) hue-rotate(90deg); }
6
7.boton:disabled {
8  filter: grayscale(100%) opacity(60%);
9}

Un filter distinto de none crea un contexto de apilamiento y pasa a ser el bloque contenedor de sus hijos con position: fixed: un modal fijo adentro de un elemento filtrado se posiciona contra ese elemento, no contra la ventana. Es Baseline desde 2016.

drop-shadow() contra box-shadow

box-shadow dibuja la sombra de la caja: siempre un rectángulo, con el radio que tenga. drop-shadow() dibuja la sombra de los píxeles: sigue el contorno de un PNG o un SVG con transparencia, y aparece también a través de un agujero.

La etiqueta de precio es un SVG con transparencia alrededor, y la línea punteada naranja es la caja del elemento. Cambiá entre las dos sombras y mové el desplazamiento y el desenfoque: una sigue la caja, la otra la forma.

box-shadowdrop-shadow()

sombra de la forma

offset-y

blur

etiqueta.css

.etiqueta {
  filter: drop-shadow(0 8px 12px oklch(0 0 0 / 35%));
}

etiqueta.html

<img class="drop-shadow-[0_8px_12px_oklch(0_0_0/35%)]" src="etiqueta.svg" alt="">

A cambio, drop-shadow() no tiene spread ni inset, y acepta una sola sombra por función (para apilar, se encadenan varias). Además es la única sombra que sobrevive a un clip-path: puesta en el padre de un elemento recortado, sigue la forma del recorte.

etiqueta.css

1.recorte-con-sombra {
2  filter: drop-shadow(0 8px 12px oklch(0 0 0 / 35%));
3}
4
5.recorte-con-sombra > .etiqueta {
6  clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
7}

Vidrio esmerilado con backdrop-filter

backdrop-filter acepta las mismas funciones, pero filtra lo que está detrás del elemento, no el elemento. Así se hace el vidrio esmerilado de una barra o un epígrafe sobre una foto.

El efecto solo se ve a través del fondo del elemento, así que el fondo tiene que ser translúcido. Con un fondo opaco el desenfoque queda tapado; sin fondo, el texto queda sobre la imagen y pierde contraste.

Lo que hay que saber:

Raíz de fondobackdrop rootEl elemento solo ve hasta el ancestro más cercano con filter, opacity menor a 1, mask, clip-path, mix-blend-mode u otro backdrop-filter. Un vidrio adentro de otro vidrio solo desenfoca lo del vidrio de afuera.
Apilamientostacking contextComo filter, crea un contexto de apilamiento y es el bloque contenedor de sus hijos fijos.
CostorendimientoEl navegador vuelve a desenfocar el fondo en cada cuadro de scroll. Un radio grande sobre una superficie grande se nota en celulares modestos.

Es Baseline desde septiembre de 2024, cuando Safari 18 lo aceptó sin prefijo. Para Safari 17 y anteriores todavía conviene repetirlo como -webkit-backdrop-filter.

Modos de mezcla

mix-blend-mode decide cómo se combinan los colores de un elemento con lo que tiene detrás, como las capas de un editor de imágenes:

MultiplicarmultiplySiempre oscurece, y el blanco desaparece. Es como superponer tintas en papel.
TramascreenLo contrario: siempre aclara, y el negro desaparece.
SuperponeroverlayMultiplica los oscuros del fondo y aclara los claros: sube el contraste.
DiferenciadifferenceResta un color del otro: el negro no cambia nada y el blanco invierte.

El elemento se mezcla con todo lo que hay detrás dentro de su contexto de apilamiento. isolation: isolate crea un contexto nuevo en el grupo: las tintas se siguen mezclando entre sí, pero ya no con la foto. Probá cada modo y activá el aislamiento para verlo.

Cualquier cosa que cree un contexto de apilamiento aísla igual (opacity menor a 1, un transform, un z-index en un elemento posicionado); isolation: isolate es la forma de hacerlo sin efectos secundarios.

background-blend-mode mezcla las capas de fondo de un mismo elemento entre sí y con su background-color, sin tocar lo que hay detrás. Las tres propiedades son Baseline desde 2020.

portada.css

1.portada {
2  background:
3    url(foto.jpg) center / cover,
4    oklch(0.7 0.15 40);       /* naranja */
5  background-blend-mode: multiply;
6}

En Tailwind

Cada función de filtro tiene su clase, y Tailwind las junta en un solo filter. Los valores fuera de la escala van entre corchetes.

CSS	Tailwind
blur(4px) · brightness(105%)	blur-[4px] · brightness-105
grayscale(100%) · sepia(35%)	grayscale · sepia-35
filter: drop-shadow(…)	drop-shadow-md
backdrop-filter: blur(12px)	backdrop-blur-[12px]
mix-blend-mode: multiply	mix-blend-multiply
isolation: isolate	isolate

foto.html

1<!-- orden de Tailwind: hue-rotate antes que sepia -->
2<img class="hue-rotate-90 sepia" src="foto.jpg" alt="…">
3
4<!-- otro orden: el filter entero entre corchetes -->
5<img class="[filter:sepia(100%)_hue-rotate(90deg)]" src="foto.jpg" alt="…">

Filters and blending

Lesson 17 of 37 · 4 min

Brightness, contrast, blur, frosted glass, overlapping inks: plenty of things that used to need a photo editor are now one line of CSS, and you can change them live.

Filter functions

filter processes the element's pixels after they're drawn, along with everything inside it. It takes a space-separated list of functions:

Blurblur(4px)It's the only one that takes a length, and it doesn't accept percentages.
Light and colorbrightness() · contrast() · saturate()100% leaves the image as it is; less lowers, more raises.
Tonesgrayscale() · sepia() · invert()From 0% (none) to 100% (fully).
Hue shifthue-rotate(90deg)Turns every hue around the color wheel.
And alsoopacity() · drop-shadow()opacity() works like the property, and drop-shadow() comes up below.

Order matters: each function works on the previous one's result, left to right. With sepia last, it wipes out the hue shift; with sepia first, the shift tints the sepia.

photo.css

1/* brown: sepia wins over the shift */
2.photo { filter: hue-rotate(90deg) sepia(100%); }
3
4/* greenish: the shift tints the sepia */
5.photo-green { filter: sepia(100%) hue-rotate(90deg); }
6
7.button:disabled {
8  filter: grayscale(100%) opacity(60%);
9}

Any filter other than none creates a stacking context and becomes the containing block for its position: fixed children: a fixed modal inside a filtered element is placed against that element, not the viewport. It has been Baseline since 2016.

drop-shadow() versus box-shadow

box-shadow shadows the box: always a rectangle, with whatever radius it has. drop-shadow() shadows the pixels: it follows the outline of a PNG or SVG with transparency, and it even shows through a hole.

The price tag is an SVG with transparency around it, and the orange dashed line is the element's box. Switch between the two shadows and move the offset and the blur: one follows the box, the other the shape.

box-shadowdrop-shadow()

the shape's shadow

offset-y

blur

tag.css

.tag {
  filter: drop-shadow(0 8px 12px oklch(0 0 0 / 35%));
}

tag.html

<img class="drop-shadow-[0_8px_12px_oklch(0_0_0/35%)]" src="tag.svg" alt="">

In exchange, drop-shadow() has no spread and no inset, and each function takes one shadow (chain several to stack them). It's also the only shadow that survives a clip-path: on the parent of a clipped element, it follows the clipped shape.

tag.css

1.clipped-with-shadow {
2  filter: drop-shadow(0 8px 12px oklch(0 0 0 / 35%));
3}
4
5.clipped-with-shadow > .tag {
6  clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
7}

Frosted glass with backdrop-filter

backdrop-filter takes the same functions, but it filters what's behind the element, not the element. That's how you get the frosted glass of a toolbar or a caption over a photo.

The effect only shows through the element's background, so the background has to be translucent. An opaque background covers the blur; no background leaves the text on the image with poor contrast.

Worth knowing:

Backdrop rootbackdrop rootThe element only sees up to the nearest ancestor with filter, opacity below 1, mask, clip-path, mix-blend-mode or another backdrop-filter. Glass inside glass only blurs what's in the outer glass.
Stackingstacking contextLike filter, it creates a stacking context and becomes the containing block for its fixed children.
CostperformanceThe browser blurs the backdrop again on every scroll frame. A large radius over a large surface shows on modest phones.

It has been Baseline since September 2024, when Safari 18 accepted it unprefixed. For Safari 17 and earlier, it's still worth repeating it as -webkit-backdrop-filter.

Blend modes

mix-blend-mode decides how an element's colors combine with what's behind it, like layers in an image editor:

MultiplymultiplyIt always darkens, and white disappears. Think of inks overlapping on paper.
ScreenscreenThe opposite: it always lightens, and black disappears.
OverlayoverlayMultiplies the backdrop's darks and lightens its lights: more contrast.
DifferencedifferenceSubtracts one color from the other: black changes nothing and white inverts.

The element blends with everything behind it in its stacking context. isolation: isolate creates a new one on the group: the inks still blend with each other, but not with the photo. Try each mode and turn isolation on to see it.

Anything that creates a stacking context isolates too (opacity below 1, a transform, a z-index on a positioned element); isolation: isolate does it with no side effects.

background-blend-mode blends an element's own background layers with each other and with its background-color, leaving what's behind alone. All three properties have been Baseline since 2020.

cover.css

1.cover {
2  background:
3    url(photo.jpg) center / cover,
4    oklch(0.7 0.15 40);       /* orange */
5  background-blend-mode: multiply;
6}

In Tailwind

Each filter function has its own class, and Tailwind combines them into a single filter. Values off the scale go in brackets.

CSS	Tailwind
blur(4px) · brightness(105%)	blur-[4px] · brightness-105
grayscale(100%) · sepia(35%)	grayscale · sepia-35
filter: drop-shadow(…)	drop-shadow-md
backdrop-filter: blur(12px)	backdrop-blur-[12px]
mix-blend-mode: multiply	mix-blend-multiply
isolation: isolate	isolate

photo.html

1<!-- Tailwind's order: hue-rotate before sepia -->
2<img class="hue-rotate-90 sepia" src="photo.jpg" alt="…">
3
4<!-- another order: the whole filter in brackets -->
5<img class="[filter:sepia(100%)_hue-rotate(90deg)]" src="photo.jpg" alt="…">