Generador de filtros CSS (filter) para imágenes
Elige una foto o usa la de ejemplo y mueve los controles. La foto original no cambia: el efecto lo aplica el navegador.
Cómo usarEfectos de foto directo en CSS
Disponible en: 
Generador de filtros CSS (filter) para imágenes: para qué sirve
La propiedad filter de CSS aplica efectos de foto sin editar el archivo. Elige una foto y ajusta brillo, contraste, saturación, escala de grises, sepia, matiz, inversión, desenfoque, opacidad y la sombra que sigue el contorno (drop-shadow).
Empieza con uno de los filtros preestablecidos (blanco y negro, vintage, frío, cálido, desvanecido, vívido, nocturno), copia el CSS o descarga la imagen con el filtro aplicado. La opción de hover genera el efecto clásico de la foto que vuelve a la normalidad al pasar el mouse, con una transición que respeta a quien pidió menos movimiento.
Cómo usar
- Elige la foto o usa la de ejemplo.
- Ajusta los controles o elige un filtro preestablecido.
- Copia el CSS o descarga la imagen.
Cuándo usar
- Fotos del equipo en blanco y negro.
- Galería con efecto al pasar el mouse.
- Logos con sombra en el contorno.
Preguntas frecuentes
¿Qué ventaja tiene usar filter en vez de editar la foto?
La misma foto sirve para varios efectos y se puede animar el cambio, como una foto en blanco y negro que se llena de color al pasar el mouse. No hace falta guardar una versión para cada efecto.
¿Importa el orden de los filtros?
Sí. Los filtros se aplican de izquierda a derecha, y cada uno trabaja sobre el resultado del anterior. Por eso un sepia seguido de un cambio de matiz da un resultado distinto al del orden contrario.
¿Cuál es la diferencia entre drop-shadow y box-shadow?
El box-shadow dibuja la sombra del rectángulo de la imagen. El drop-shadow, que es un filtro, sigue el contorno de lo visible, así que funciona con PNG y SVG de fondo transparente, como logos y recortes.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.