Generador de filtros CSS

¿Qué es Generador de filtros CSS?

Aplica la propiedad CSS filter a una imagen en tiempo real. Combina desenfoque, brillo, contraste, escala de grises, rotación de tono, inversión, opacidad, saturación, sepia y drop-shadow, compara el resultado con el original y copia el código. Puedes usar la imagen de ejemplo incluida o cargar tu propia imagen, que se queda en tu dispositivo.

Cómo usar Generador de filtros CSS

1. Elige un ajuste predefinido (Blanco y negro, Vintage, Cálido, Frío, Dramático…) o empieza desde Ninguno.
2. Mueve los deslizadores de cada función de filtro.
3. Activa Añadir drop-shadow() y ajusta sus desplazamientos, desenfoque, color y opacidad si hace falta.
4. Haz clic en Usar tu propia imagen para probar con un archivo local.
5. Copia el código CSS.

Ejemplo

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

Cuándo usar Generador de filtros CSS

Úsalo para efectos hover en imágenes, un estilo fotográfico coherente, fondos atenuados y sombras que siguen formas PNG/SVG transparentes (drop-shadow). No modifica el archivo de imagen en sí; para cambios permanentes usa un editor de imágenes o las herramientas de imagen del sitio. Para afectar a lo que hay detrás de un elemento en lugar del propio elemento, usa backdrop-filter (consulta el Generador de glassmorphism).

Cómo funciona Generador de filtros CSS

Solo se escriben las funciones que difieren de su valor neutro (por ejemplo, brightness se omite al 100 %), en un orden fijo: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow. El orden importa en CSS porque cada función se aplica sobre el resultado de la anterior. Si no se cambia nada, la salida es filter: none;. Tu imagen se muestra mediante una URL de objeto local y nunca se sube.

Casos de Uso Comunes

• ✓ Efectos hover de escala de grises a color en logotipos
• ✓ Estilos de foto vintage o cálidos en galerías
• ✓ Atenuar imágenes de cabecera bajo el texto
• ✓ Sombras alrededor de iconos PNG transparentes con drop-shadow()
• ✓ Previsualizaciones rápidas de cambios de color con hue-rotate

Preguntas Frecuentes

Explora más categorías