Filtros
La propiedad filter de CSS es fantástica. Te permite aplicar efectos gráficos (como los que encontrarías en Photoshop o Gimp) directamente a cualquier elemento HTML, como imágenes, texto o divs.
No son "muchas propiedades", sino una sola propiedad (filter) que acepta diferentes funciones. Puedes incluso encadenar varias funciones a la vez.
Funciones de Color y Tono
grayscale(cantidad)
Convierte el elemento a escala de grises.
Los valores que puede tomar son: 1 (o 100%) es un blanco y negro total. 0 (o 0%) es el color original.
.mi-elemento-filtrado {
filter: grayscale(1);
}sepia(cantidad)
Aplica un tono sepia (como de foto antigua).
Los valores que puede tomar son: 1 (o 100%) es un sepia total. 0 (o 0%) es el original.
.mi-elemento-filtrado {
filter: sepia(0.8);
}saturate(cantidad)
Ajusta la saturación (intensidad) de los colores.
Los valores que puede tomar son: 1 (o 100%) es el normal. 0 es gris (igual que grayscale(1)). 2 (o 200%) es el doble de saturado.
.mi-elemento-filtrado {
filter: saturate(2);
}hue-rotate(grados)
Rota los colores en el círculo cromático.
Los valores que puede tomar son: Un ángulo en grados (deg). 90deg hace que los rojos se vean verdes, los verdes azules, etc.
.mi-elemento-filtrado {
filter: hue-rotate(90deg);
}invert(cantidad)
Qué hace: Invierte los colores (como un negativo de foto).
Los valores que puede tomar son: 1 (o 100%) es una inversión total. 0 es el original.
.mi-elemento-filtrado {
filter: invert(1);
}Funciones de Brillo y Desenfoque
brightness(cantidad)
Ajusta el brillo del elemento.
Los valores que puede tomar son: 1 (o 100%) es el normal. 0 es totalmente negro. 1.5 (o 150%) es un 50% más brillante
.mi-elemento-filtrado {
filter: brightness(1.5);
}contrast(cantidad)
Ajusta el contraste (diferencia entre claros y oscuros).
Los valores que este filtro puede tener son: 1 (o 100%) es el normal. 2 (o 200%) es el doble de contraste.
.mi-elemento-filtrado {
filter: contrast(2);
}blur(radio)
Aplica un desenfoque (blur) gaussiano.
Los valores que pueden tener son: Una medida en píxeles (px), rem, etc. A mayor valor, mayor desenfoque.
.mi-elemento-filtrado {
filter: blur(5px);
}Funciones Especiales
opacity(cantidad)
Ajusta la transparencia. (Funciona igual que la propiedad opacity, pero usarla dentro de filter es útil para animaciones).
Los valores que puede tomar son: 1 (o 100%) es opaco. 0 es invisible. 0.5 es 50% transparente.
.mi-elemento-filtrado {
filter: opacity(0.5);
}drop-shadow(x y blur color)
¡Esta es muy útil! Crea una sombra paralela que respeta la forma del contenido (por ejemplo, el contorno de un logo en PNG transparente), a diferencia de box-shadow que solo sombrea la "caja".
Valores: [offset-x] [offset-y] [blur-radius] [color]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo de drop-shadow</title>
<link rel="stylesheet" href="2.drop-shadow.css">
</head>
<body>
<main>
<div class="card">
<h3><code>box-shadow</code> (Mal)</h3>
<img id="caja-con-box-shadow" src="https://img.icons8.com/ios-filled/100/star--v1.png"
alt="Estrella con box-shadow">
</div>
<div class="card">
<h3><code>filter: drop-shadow()</code> (Bien)</h3>
<img id="caja-con-drop-shadow" src="https://img.icons8.com/ios-filled/100/star--v1.png"
alt="Estrella con drop-shadow">
</div>
</main>
</body>
</html>¿Cuándo usar drop-shadow()?
- Logos e iconos PNG: Es la mejor opción.
- Texto: Puedes usar drop-shadow() en texto. Funciona de forma muy similar a text-shadow, aunque drop-shadow a veces es acelerado por hardware (GPU) y puede ser más eficiente, aunque text-shadow suele ser la opción estándar para texto.
url()
Te permite aplicar un filtro personalizado definido en un archivo SVG.
.mi-elemento-filtrado {
filter: url(#mi-filtro-svg);
}backdrop-filter
Este filtro CSS es una de las más interesantes visualmente. Se utiliza para aplicar efectos gráficos (como desenfoque, sepia, brillo, etc.) al área que está detrás de un elemento, en lugar de al elemento en sí.
El uso más común es para crear el popular efecto de "cristal esmerilado" o "vidrio dépoli" (como el que ves en las interfaces de iOS, macOS o Windows 11).
Requisito: Para que backdrop-filter funcione y puedas ver el efecto, el elemento al que se lo aplicas debe ser transparente o semitransparente.
Si el elemento tiene un fondo sólido (ej. background-color: #FFF), tapará completamente lo que hay detrás, y el filtro no tendrá nada que "filtrar" visualmente. Por eso, casi siempre se usa junto con un background-color que tenga transparencia alfa (ej. rgba(255, 255, 255, 0.5)).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Backdrop-Filter</title>
<link rel="stylesheet" href="3.backdrop-filter.css">
</head>
<body>
<main class="contenedor-fondo">
<div class="caja-cristal">
<h2>Hola Mundo</h2>
<p>Esta caja desenfoca el fondo.</p>
</div>
</main>
</body>
</html>¿Qué hace backdrop-filter exactamente?
- Mira el elemento .caja-cristal.
- Toma nota de todos los píxeles que están detrás de él (en este caso, los píxeles de la imagen de fondo).
- Aplica el filtro que le pediste (blur(10px)) solo a esa área.
- Finalmente, renderiza el contenido de la caja (.caja-cristal) encima de esa área ya filtrada.
Cómo Combinar Varios Filtros
Puedes aplicar múltiples filtros a la vez separándolos con un espacio. El orden puede afectar ligeramente al resultado final.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplos de filtros CSS</title>
<link rel="stylesheet" href="1.filtros.css">
</head>
<body>
<h1>Propiedad <code>filter</code> de CSS</h1>
<main>
<div class="card">
<h3>Imagen Original</h3>
<img
src="https://picsum.photos/id/1062/300/200"
alt="Perro original">
</div>
<div class="card">
<h3>Pasa el ratón (Hover)</h3>
<img id="imagen-filtrada"
src="https://picsum.photos/id/1062/300/200"
alt="Perro con filtro">
</div>
</main>
</body>
</html>