CSS
Filters, blending, clipping y masking
Aplica filtros, modos de mezcla, clipping y máscaras para modificar la composición visual, limitar formas y combinar capas con control.
- Última actualización
- Actualizada
- Nivel
- Profundización
CSS
Aplica filtros, modos de mezcla, clipping y máscaras para modificar la composición visual, limitar formas y combinar capas con control.
.image {
filter: grayscale(1) contrast(1.1);
}Funciones comunes:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()El orden importa porque cada filtro recibe el resultado del anterior.
.overlay {
background: rgb(255 255 255 / 0.65);
backdrop-filter: blur(1rem);
}Filtra el contenido detrás del elemento. Necesita transparencia para percibirse y puede ser costoso sobre áreas grandes o en movimiento.
Incluye un fondo legible si el efecto no está disponible.
.image {
mix-blend-mode: multiply;
}Combina el elemento con el backdrop. background-blend-mode mezcla background layers entre sí.
El resultado depende completamente del contenido inferior y puede destruir contraste.
.component {
isolation: isolate;
}Crea un stacking context y limita blending al componente, evitando que se mezcle con toda la página.
.avatar {
clip-path: circle(50%);
}Define qué región se pinta. La caja de layout y el área de interacción no siempre siguen exactamente la forma visible.
.card {
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}.logo {
background: currentColor;
mask: url("logo.svg") center / contain no-repeat;
}La máscara controla alpha o luminance para revelar partes del elemento. Es útil para iconos monocromáticos que siguen currentColor.
Las masks pueden combinarse mediante capas y operadores. La interoperabilidad de detalles avanzados debe probarse en los navegadores objetivo.
filter: url("filters.svg#noise");Permiten pipelines complejos, pero añaden dependencia del recurso y mayor costo de debugging.
Un área recortada puede seguir teniendo una caja geométrica diferente para layout y algunas interacciones. Prueba pointer y foco, especialmente en controles con formas inusuales.
Filters, blending y masks pueden desaparecer o transformarse en modos de alto contraste. Nunca los uses como única señal de estado.
Costos frecuentes:
Mide en dispositivos modestos.
¿Por qué mix-blend-mode puede producir texto ilegible aunque el color declarado parezca correcto?
Porque el color final se calcula mezclándolo con un backdrop variable, no usando el valor aislado.
Controles, temas y preferencias visuales adapta componentes nativos y la interfaz al usuario.