Generador de Filtros CSS Gratuito en Línea
Genera efectos de filtro CSS con vista previa en vivo.
'/%3E%3Ccircle cx='200' cy='150' r='70' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
Who uses the Generador de Filtros CSS?
- Desarrolladores frontend previsualizando combinaciones de filtros de imagen antes de aplicarlas en un proyecto.
- Diseñadores UI prototipando efectos visuales de estado hover y temas de color en CSS.
- Desarrolladores web explorando cómo interactúan los filtros de brillo/contraste/saturación antes de escribir el CSS final.
How the Generador de Filtros CSS works
La herramienta se carga con una imagen de degradado de ejemplo incorporada — no hay opción de subida.
Ajusta los controles de filtro: Brillo, Contraste, Saturación (0–200%), Rotación de tono (0–360°), Desenfoque (0–20px), Escala de grises, Sepia, Inversión (0–100%).
Combina varios filtros para lograr el efecto deseado; haz clic en Reset para volver todos los controles a sus valores predeterminados.
Copia la propiedad CSS filter desde el panel de salida para usarla en tu proyecto.
Tips & tricks
- No hay subida de imágenes — prueba combinaciones de filtros en la vista previa incorporada, luego copia el CSS para aplicarlo en tu imagen real.
- Los filtros dejados en su valor predeterminado (100% brillo, 0 desenfoque, etc.) se omiten automáticamente de la salida, manteniendo el CSS generado mínimo.
- opacity() y drop-shadow() no están incluidos como controles aquí — añádelos manualmente al valor filter copiado si los necesitas.
- Haz clic en Reset para volver instantáneamente cada control a su valor predeterminado y empezar de nuevo.
Frequently Asked Questions
¿Qué filtros CSS genera esta herramienta?
Ocho filtros: brightness(), contrast(), saturate(), hue-rotate(), blur(), grayscale(), sepia() e invert(). Todos se combinan en una sola propiedad filter, en ese orden, omitiendo los que se dejen en su valor predeterminado (sin efecto).
¿Puedo subir mi propia imagen para previsualizar filtros?
Actualmente no — la vista previa usa una imagen de degradado fija incorporada. Copia el CSS de filtro generado y aplícalo a tu propia imagen en tu proyecto para verlo sobre contenido real.
¿Cómo aplico un filtro CSS a una imagen al pasar el cursor?
Añade el filtro en :hover: .image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } Esto crea transiciones de filtro suaves al pasar el cursor.
¿Cuál es la diferencia entre box-shadow y el filtro drop-shadow?
box-shadow se aplica a la caja del elemento (rectángulo). El filtro drop-shadow() sigue la forma alfa real del elemento — perfecto para imágenes PNG con transparencia donde quieres que la sombra siga el contorno de la imagen. Esta herramienta no incluye un control drop-shadow; añádelo manualmente al CSS copiado si lo necesitas.
¿Se pueden animar los filtros CSS?
Sí. Los filtros CSS son animables con transiciones y animaciones por fotogramas clave: @keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
Is my data safe when using the Generador de Filtros CSS?
Completely safe. The Generador de Filtros CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Generador de Filtros CSS output in commercial projects?
Yes. The Generador de Filtros CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Generador de Filtros CSS follow official standards?
Yes. The Generador de Filtros CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.