Generador de Filtros CSS
Crea efectos de filtro CSS visualmente con vista previa en vivo y deslizadores para desenfoque, brillo, contraste, escala de grises, rotación de matiz, inversión, opacidad, saturación y sepia.
Diseña efectos de filtro CSS visualmente con este generador gratuito. Arrastra los deslizadores de desenfoque, brillo, contraste, escala de grises, rotación de matiz, inversión, opacidad, saturación y sepia y observa cómo la vista previa en vivo se actualiza mientras los combinas. Cuando quede como quieres, copia una regla filter limpia y lista para pegar — todo en tu navegador, sin nada que instalar.
¿Qué es un generador de filtros CSS?
Un generador de filtros CSS es una herramienta visual que construye la propiedad filter por ti. La propiedad filter de CSS aplica efectos gráficos como desenfoque, cambios de color y ajustes de brillo a un elemento. En lugar de memorizar cada función de filtro y sus unidades, ajustas los deslizadores, ves una vista previa en vivo y copias el CSS exacto del filtro para pegarlo en tu hoja de estilos.
Cómo generar filtros CSS
Ajusta los deslizadores de los efectos que quieras, observa la vista previa y copia la regla generada.
- Usa el deslizador de Desenfoque para suavizar el elemento, medido en píxeles.
- Ajusta Brillo, Contraste y Saturación para modificar el tono y la intensidad.
- Aplica Escala de grises, Sepia o Invertir para tratamientos de color estilísticos.
- Gira la matiz para desplazar todos los colores alrededor de la rueda cromática.
- Haz clic en Copiar CSS para obtener la regla filter lista para pegar.
¿Por qué usar este generador de filtros CSS?
- La vista previa en vivo se actualiza al instante mientras ajustas cada filtro.
- Combina varios filtros en una sola regla con el orden correcto.
- Solo se incluyen los filtros distintos del valor por defecto, manteniendo la salida limpia.
- Abarca desenfoque, brillo, contraste, escala de grises, rotación de matiz, inversión, opacidad, saturación y sepia.
- Un clic copia una declaración filter lista para pegar.
- 100% gratis y privado — todo se ejecuta en tu navegador.
Preguntas frecuentes
¿Qué hace la propiedad filter de CSS?
La propiedad filter aplica efectos visuales como desenfoque, brillo, contraste, escala de grises, rotación de matiz, inversión, opacidad, saturación y sepia a un elemento y su contenido. Se usa habitualmente en imágenes, fondos y elementos de interfaz para cambiar su aspecto sin editar el archivo de origen.
¿Puedo combinar varios filtros a la vez?
Sí. Aplicas varias funciones de filtro en una sola declaración separándolas con espacios, por ejemplo filter: contrast(120%) brightness(110%) blur(2px). Se aplican en el orden indicado, por lo que la secuencia puede afectar al resultado final. Este generador combina todos tus filtros activos en una sola regla por ti.
¿Por qué algunos filtros se omiten de la salida?
Para mantener el CSS limpio, cualquier filtro que conserve su valor por defecto (de identidad) — como brillo 100% o desenfoque 0px — no tiene efecto visual y se omite. Si todos los filtros están en su valor por defecto, la salida es filter: none.
¿Qué unidades usan las funciones de filtro de CSS?
El desenfoque usa una longitud como px, la rotación de matiz usa un ángulo como deg, y el resto aceptan un porcentaje (o un número sin unidad equivalente, donde 1 equivale a 100%). Esta herramienta genera porcentajes y grados para mayor claridad y amplia compatibilidad.
¿La propiedad filter de CSS es compatible con los navegadores?
Sí. La propiedad filter es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Para navegadores muy antiguos podrías necesitar un prefijo de proveedor o un respaldo, pero para los objetivos actuales funciona sin prefijos.