Cargando...

Filtros CSS

Las animaciones escribieron líneas de tiempo. Transform fijó dónde caen los píxeles. Los filtros cambian cómo se ven: un desenfoque suave tras un modal, miniaturas en gris que recuperan color al pasar el cursor, una foto con más brillo y contraste — sin mover la caja en el layout.

Qué hace filter

La propiedad filter aplica uno o más efectos de posprocesado sobre la salida renderizada del elemento (y normalmente sus descendientes como grupo). Ancho, alto y flujo del documento no cambian; solo cambia lo pintado. Use filter: none (valor inicial) para quitar efectos.

Encadena funciones en un solo valor filter, separadas por espacios — espíritu parecido a encadenar transform, pero aquí las herramientas son visuales, no espaciales: filter: brightness(1.1) contrast(1.05) saturate(1.2);

Funciones de filtro de un vistazo

📊 Funciones de filter CSS habituales

Función Uso típico
blur(radius) Suavizar bordes / look escarchado (px u otra longitud)
brightness(%) Aclarar u oscurecer (1 / 100% = sin cambio)
contrast(%) Reforzar o aplanar el rango tonal
grayscale(%) Quitar color (1 = gris total)
saturate(%) Subir o bajar intensidad del color
hue-rotate(angle) Desplazar matices en la rueda cromática
opacity(%) Atenuar el resultado filtrado (relacionado con, pero no igual a, la propiedad opacity)
sepia(%) / invert(%) Tono vintage cálido / invertir tonos
drop-shadow(…) Sombra que sigue la forma alpha (iconos, bordes transparentes)
none Quitar filtros

Porcentajes y números sueltos suelen valer ambos (grayscale(1) ≈ grayscale(100%)). Elija un estilo en el proyecto y manténgalo.

Tarjetas en gris que «despiertan» al hover

Patrón clásico de galería: apagadas por defecto, color pleno al pasar el cursor. Un transition corto en filter da intención — movimiento de lecciones anteriores, aspecto de esta.

Miniatura en gris que recupera color al hover

css 
.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}

.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}

grayscale(0) es color completo. Mantenga la transición solo en filter para cambios pequeños; animar blur fuerte en fotos grandes cuesta rendimiento.

Blur suave para enfatizar

blur() suaviza el elemento. Radio moderado en capas de fondo u overlays — no en todo el body — para que el texto siga legible.

Panel de fondo difuminado detrás del modal

css 
.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}

.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}

Difuminar un ancestro grande también difumina el texto dentro. Prefiera difuminar una capa de fondo (o backdrop-filter abajo) cuando el primer plano debe quedar nítido.

Brightness y contrast para fotos

Fotos de producto y hero suelen necesitar un retoque ligero sin abrir un editor.

Gradación de foto con brightness y contrast

css 
.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}

.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}

Valores un poco por encima de 1 aclaran o dan punch al contraste; por debajo de 1 retroceden. Pasos pequeños = acabado; saltos grandes = falso.

Apilar varios filtros

Una declaración puede combinar tono, color y suavidad. En pilas complejas el orden puede importar — escriba de izquierda a derecha como busca el efecto y compruebe en el navegador.

Apilado de saturate, hue-rotate y blur ligero

css 
.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}

.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}

Empiece con una o dos funciones. Añada más solo si el diseño lo pide — cada filtro extra es más trabajo GPU en superficies grandes.

drop-shadow() frente a box-shadow

box-shadow sigue la caja de borde. drop-shadow() sigue la silueta alpha — ideal para PNG transparentes e iconos donde la sombra debe abrazar la forma, no un rectángulo.

Sombra de icono con filtro drop-shadow

css 
.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}

.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}

drop-shadow() no admite inset como box-shadow. Para elevación hundida de tarjeta, quédese con box-shadow de la lección Effects.

backdrop-filter — difuminar lo que hay detrás

backdrop-filter afecta al contenido visible a través de un elemento translúcido (cristal escarchado). El elemento necesita fondo semitransparente; si no, no hay nada que muestrear.

Idea de ejemplo: cabecera fija sobre un hero cargado — background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px);. Soporte amplio en navegadores modernos; fondo sólido de respaldo si el blur es prescindible.

Opacity del filtro vs. propiedad opacity

filter: opacity(0.5) atenúa la capa filtrada. La propiedad opacity atenúa el elemento y suele crear un grupo que afecta stacking y composición de hijos. Para «todo el control incluyendo hijos se desvanece junto», la propiedad opacity suele ser más clara. Use opacity() en el filtro cuando forma parte de una pila de filtros con blur o gradación de color.

Pruébelo usted

  1. Ponga filter: grayscale(1) en la imagen de una tarjeta; restaure con grayscale(0) en :hover y transition: filter 0.2s ease.
  2. Suavice una capa de fondo con blur(8px); deje el texto del primer plano sin filtro.
  3. Graded una foto con brightness(1.1) contrast(1.05); luego baje ambos hacia 1 hasta que se sienta natural.
  4. Apile saturate(1.4) hue-rotate(20deg) en un sticker; quite una función y compare.
  5. Sombre un icono PNG transparente con drop-shadow(...); compare el mismo icono con box-shadow en una caja cuadrada.
  6. Opcional: barra escarchada con background translúcido + backdrop-filter: blur(12px).

Errores frecuentes

  • blur() fuerte en una sección enorme de la página con texto legible
  • Esperar inset en drop-shadow() como en box-shadow
  • Usar filter: opacity() cuando una opacity simple en el elemento sería más clara
  • Animar filtros pesados en imágenes grandes en cada frame de scroll sin revisar rendimiento
  • backdrop-filter sobre fondo totalmente opaco — no se ve nada detrás, no hay efecto escarchado

Resumen

  • filter cambia cómo se ven los píxeles renderizados; el flujo del layout no se mueve
  • Encadene blur, brightness, contrast, grayscale, saturate y similares en un valor
  • Prefiera drop-shadow() para sombras con forma alpha; box-shadow para elevación de caja
  • backdrop-filter escarcha lo que se ve a través de una capa translúcida
  • Aquí cierra Effects & Motion; el siguiente módulo es Modern Toolkit — empezando por CSS Variables

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
6
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 62 de 63
Css Tutorial