Softonic

Generador de Filtros CSS

Paso 1 / 2
Siguiente

La propiedad CSS filter aplica efectos de procesamiento de imágenes, como desenfoque, brillo, contraste y saturación, a cualquier elemento, no solo a imágenes. Los errores suelen aparecer al encadenar varios filtros y acertar con las unidades. Este generador construye la declaración filter para las cinco funciones más comunes: desenfoque, brillo, contraste, escala de grises y saturación. Introduce tus valores y copia el CSS resultante.

Cómo construir una cadena de filtros

  1. 1

    Introduce los valores

    El desenfoque se expresa en píxeles; el brillo, el contraste, la escala de grises y la saturación, en porcentajes.

  2. 2

    Entiende la escala

    Brillo y contraste al 100% significan sin cambios; al 0%, el elemento queda negro o gris. La escala de grises va del 0% (color completo) al 100% (sin color); la saturación al 100% deja los colores tal cual.

  3. 3

    Genera el CSS

    Pulsa el botón y la herramienta devuelve la regla `filter` combinada con las cinco funciones.

  4. 4

    Copia la regla

    Copia el resultado y pégalo en tu hoja de estilos.

  5. 5

    Comprueba el orden

    Las funciones se aplican de izquierda a derecha. Si el efecto no es el esperado, ajusta los valores.

Las funciones de filtro

Función Unidad Efecto
blur() px Desenfoque gaussiano. 0 = sin desenfoque
brightness() % o decimal 100% = sin cambio, 0% = negro, 200% = doble
contrast() % o decimal 100% = sin cambio, 0% = gris, 200% = doble
saturate() % o decimal 100% = sin cambio, 0% = escala de grises
grayscale() % o decimal 0% = sin cambio, 100% = completamente desaturado
sepia() % o decimal 0% = sin cambio, 100% = completamente sepia
hue-rotate() deg 0deg = sin cambio. Rota la rueda de matiz
invert() % o decimal 0% = sin cambio, 100% = completamente invertido
opacity() % o decimal Igual que la propiedad opacity
drop-shadow() x y desenfoque color Como box-shadow pero sigue opacidad/clip-path

El orden de encadenamiento importa

filter: brightness(0.5) saturate(2) aplica brillo primero, luego saturación, los dos filtros se combinan.

filter: saturate(2) brightness(0.5) aplica saturación primero. Debido a que la imagen es más brillante antes de oscurecerse, la saturación del color es más pronunciada.

La diferencia visual es sutil pero real. Prueba ambos órdenes cuando una cadena de filtros no se vea como esperabas.

Recetas comunes

/* Apariencia de foto desvanecida */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / desvanecido */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Aproximación de duotono */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Oscurecer héroe */
filter: brightness(0.6);

/* Estado deshabilitado */
filter: grayscale(1) opacity(0.6);

/* Vidrio / superposición esmerilada */
filter: blur(12px) saturate(1.3);

backdrop-filter para vidrio esmerilado

filter se aplica al elemento mismo; backdrop-filter se aplica a lo que está detrás de un elemento semi-transparente, el efecto de vidrio esmerilado que popularizó iOS.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Soporte: todos los navegadores modernos; Firefox finalmente lo soporta sin bandera en 103+.

Notas de rendimiento

  • blur() es el filtro más costoso porque requiere convolucionar cada píxel con un núcleo. Un desenfoque de 30px en una imagen de héroe 4K cuesta cuadros reales.
  • grayscale, sepia, brightness y similares son transformaciones de color por píxel, baratas.
  • Los filtros son acelerados por GPU en navegadores modernos, pero animar blur() aún provoca tartamudeos en dispositivos de gama baja.
  • Prefiere will-change: filter antes de animar.

filter: drop-shadow() vs. box-shadow

  • box-shadow sigue el border-box del elemento (respeta border-radius).
  • filter: drop-shadow() sigue los píxeles no transparentes del elemento, lo que significa que traza formas de clip-path, transparencia PNG y rutas SVG.

Para sombras en imágenes recortadas o transparentes, usa drop-shadow. Para tarjetas y cajas estándar, box-shadow es más rápido.

Preguntas frecuentes

Sí, el filtro se aplica al elemento y todos sus descendientes como un grupo. Si filtras un padre, los hijos están incluidos. Para filtrar solo el fondo del padre, coloca el contenido en un contexto de apilamiento separado o usa backdrop-filter.

Porque el desenfoque se aplica a todo el elemento, incluido el texto renderizado. No hay forma de desenfocar un fondo mientras se mantiene el texto nítido a través de filter simple. Usa backdrop-filter en una superposición semi-transparente, manteniendo el texto fuera del elemento filtrado.

Sí, todas las funciones de filtro se pueden animar. Presta atención al rendimiento del desenfoque en móviles, animar el radio de desenfoque es notablemente costoso. grayscale, sepia y brightness se animan de forma económica.

Sí, CSS filter se aplica a elementos SVG de la misma manera que a cualquier otro elemento DOM. SVG también tiene su propio sistema de elementos <filter> más rico, que es más poderoso pero mucho más verboso.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.