Filtros de imagen
Aplica escala de grises, sepia, contraste, desenfoque y giro de tono a una foto, y exporta el PNG con su CSS.
Filtros de imagen funciona por completo en tu navegador. Tu foto se procesa en tu dispositivo y nunca se sube.
Abrir el Optimizador de imágenes
Acerca de Image Filters
Canvas entiende la misma gramática de filtros que CSS, lo que hace esta herramienta especialmente honesta: la vista previa, el PNG exportado y la declaración CSS que copias salen de una única cadena de filtros y no pueden desviarse entre sí. Diez ajustes preestablecidos cubren lo habitual —blanco y negro, vintage, noir, desvaído— y debajo hay nueve controles para todo lo demás. Solo aparecen en la salida los controles que mueves, así que el CSS queda lo bastante corto para pegarlo en una hoja de estilos.
Características
- Brillo, contraste, saturación, escala de grises, sepia, invertir, tono, desenfoque y opacidad
- Diez ajustes preestablecidos, de blanco y negro a noir
- Vista previa en vivo a plena calidad
- Declaración CSS copiable idéntica a la exportación
- Los filtros se aplican a la resolución completa de la imagen
- Todo funciona en tu navegador
Cómo usar Image Filters
- Suelta una imagen en la herramienta
- Pulsa un ajuste preestablecido o mueve los controles
- Comprueba la vista previa a plena resolución
- Descarga el PNG o copia el CSS para la web
Ejemplo
Entrada
Black & white preset
Salida
filter: contrast(110%) grayscale(100%);
La misma cadena controla la exportación del canvas y el CSS que copias.
Errores comunes y solución de problemas
- El fichero descargado es mayor que el original. — La exportación es PNG, sin pérdida y mucho más pesada que un JPEG. Pasa el resultado por un optimizador si el tamaño importa más que la fidelidad exacta.
- El CSS se ve distinto en el navegador que la exportación. — Comprueba si un elemento padre ya tiene un filtro: los filtros CSS se acumulan hacia abajo. El PNG exportado ya lleva el filtro incorporado.
- Un desenfoque fuerte va lento en una foto grande. — El desenfoque es el único filtro cuyo coste crece con el radio y con el tamaño. Reduce el radio o redimensiona la imagen antes.
Preguntas frecuentes
- ¿Cómo paso una imagen a blanco y negro?
- Usa el ajuste de blanco y negro o lleva el control de escala de grises al 100 %. Añadir algo de contraste, en torno al 110 %, evita que la foto quede plana.
- ¿Aplicar filtros reduce la calidad?
- El filtro trabaja a resolución completa y la exportación es PNG sin pérdida, así que no se descarta nada. La única pérdida viene del original si ya era un JPEG comprimido.
- ¿Puedo usar los mismos filtros en CSS en mi web?
- Sí, para eso está la declaración copiable. Aplicarla a una etiqueta <img> da un resultado idéntico sin enviar una segunda copia de la imagen.
- ¿Qué hace exactamente el giro de tono?
- Desplaza todos los colores alrededor de la rueda cromática los grados indicados, sin tocar brillo ni saturación. Los giros pequeños calientan o enfrían la foto.
Herramientas relacionadas
Todas las herramientas de ArrayKit