Añade la entrada
Valores de ocho controles de filtro.
Mesa de diseño
Generador de filtros CSS
Previsualiza un efecto reutilizable y copia una sola declaración filter.
Privacidad integradaTu trabajo permanece contigo
CSS
filter
filter
filter: brightness(100%) contrast(100%) saturate(100%) hue-rotate(0deg) blur(0px) sepia(0%) grayscale(0%) invert(0%);Tu trabajo permanece privado en el navegador mientras usas esta herramienta.
¿Qué hace generador de filtros css?
Combina ocho funciones de filtro CSS —brillo, contraste, saturación, rotación de tono, desenfoque, sepia, escala de grises e inversión— en un orden fijo y copia la declaración resultante.
- Entrada
- Valores de ocho controles de filtro.
- Resultado
- Una declaración CSS filter.
- Precio
- Gratis
- Cuenta
- No necesaria
Cómo usar generador de filtros css
Elige los ajustes
Previsualiza un efecto reutilizable y copia una sola declaración filter.
Guarda o copia
Una declaración CSS filter.
Consejo práctico
Los filtros pueden reducir el contraste u ocultar detalles importantes; revisa siempre el resultado final.
Cuándo usar generador de filtros css
Probar un tratamiento apagado, monocromo o cálido para imágenes decorativas.
Ajustar brillo o saturación en un estado hover sin editar el recurso.
Revisar la cadena completa después de combinar varios efectos.
Ejemplo
Un ejemplo concreto de generador de filtros css
- Entrada
- La ilustración CSS incluida en la vista previa
- Ajustes
- brillo 110 %, contraste 90 %, saturación 130 %, tono 15°, desenfoque 1px, sepia 10 %, grises 0 %, inversión 0 %
- Resultado
- filter: brightness(110%) contrast(90%) saturate(130%) hue-rotate(15deg) blur(1px) sepia(10%) grayscale(0%) invert(0%);
Qué puedes esperar
Cómo funciona
Cada control se serializa como una función CSS, incluidos los valores neutros y siempre en el mismo orden. El navegador aplica la cadena a la vista previa y Restablecer devuelve brillo, contraste y saturación al 100 %, con los demás efectos a cero.
Antes de usarla
Límites y casos especiales
- El orden de las funciones cambia el resultado, pero esta interfaz no permite reordenarlas ni omitir funciones.
- La vista previa usa un gráfico integrado, no una imagen elegida; además, la página no mide la pérdida de legibilidad o contraste.
Normas y fuentes
Preguntas frecuentes
Preguntas sobre Generador de filtros CSS
¿generador de filtros css es gratis?
Sí. Generador de filtros CSS se puede usar gratis.
¿generador de filtros css mantiene privado mi trabajo?
Sí. Tu trabajo permanece privado mientras usas la herramienta; no se sube lo que introduces.
¿Por qué brightness(100%) sigue presente después de restablecer?
La herramienta siempre emite las ocho funciones. El 100 % es neutro para brillo, contraste y saturación; cero lo es para los demás controles.
¿Los mismos valores producen el mismo aspecto en todas las imágenes?
No. Los filtros transforman los píxeles recibidos, por lo que influyen los colores, el contraste, la transparencia y el fondo de cada imagen.