Generador de Filtros CSS
Genera efectos de filtro CSS visualmente. Ajusta desenfoque, brillo, contraste, escala de grises, rotación de tono, inversión, opacidad, saturación y sepia con vista previa en vivo. Gratis.
O arrastra una imagen sobre la vista previa
Referencia
¿Qué es la propiedad CSS filter?
La propiedad CSS filter aplica efectos gráficos como desenfoque, cambio de color y ajuste de contraste a un elemento. Los filtros se aplican antes de que el elemento se componga, afectando al elemento completo incluidos bordes y sombras. Múltiples funciones de filtro se pueden encadenar en una sola declaración.
Todas las funciones de filtro CSS
blur(px): Aplica un desenfoque gaussiano. Valores más altos = más desenfoque.
brightness(%): Ajusta el brillo. 100% = original, 0% = completamente negro.
contrast(%): Ajusta el contraste. 100% = original, 0% = completamente gris.
grayscale(%): Convierte a escala de grises. 0% = original, 100% = totalmente gris.
hue-rotate(deg): Rota los colores en la rueda cromática. 0deg = original, 180deg = tonos opuestos.
invert(%): Invierte los colores. 0% = original, 100% = totalmente invertido.
opacity(%): Ajusta la transparencia. 100% = totalmente opaco, 0% = totalmente transparente.
saturate(%): Ajusta la saturación del color. 100% = original, valores superiores a 100% super-saturan.
sepia(%): Aplica un tono sepia. 0% = original, 100% = totalmente sepia.
Consideraciones de rendimiento
Los filtros CSS están acelerados por GPU en navegadores modernos. Sin embargo, aplicar filtros a áreas grandes o animar valores de filtro puede causar repintados. Para mejor rendimiento: usa will-change: filter en elementos que se animarán, evita aplicar desenfoque a contenedores grandes, y prefiere backdrop-filter cuando solo necesites desenfocar lo que está detrás de un elemento.
Casos de uso comunes
Efectos hover en imágenes — escala de grises en reposo, color al pasar el ratón.
Estado deshabilitado — filter: grayscale(100%) opacity(50%) para elementos deshabilitados.
Modo oscuro — filter: invert(1) hue-rotate(180deg) como truco rápido de modo oscuro.
Desenfoque de fondo — backdrop-filter: blur(10px) para superposiciones de vidrio esmerilado.
Foto vintage — combinar sepia, contraste y brillo para un aspecto analógico.
Privacidad
Toda la generación de filtros se ejecuta 100% en tu navegador. No se envían datos a ningún servidor. Las imágenes subidas permanecen en tu dispositivo.