Generador de Filtros CSS

Compón una cadena CSS filter: en tu navegador. Activa o desactiva cada una de las diez funciones de filtro CSS, ajusta su valor con un deslizador y un campo numérico, y ve el resultado en directo sobre una imagen de muestra. Once preajustes seleccionados — Escala de grises, Sepia, Vintage, Dramático, Frío, Cálido, Alto contraste, Desvanecido, Lomo, Invertir, Ninguno — un clic los carga. Pega cualquier valor filter: existente y los controles lo siguen. Copia el CSS canónico con un clic. 100% del lado del cliente, sin subir nada.

0
filter:
filter: none;

Listo.

Preajustes

Un clic carga la cadena y activa las capas correspondientes.

Capas

Activa una capa para añadirla a la cadena. Los deslizadores y campos numéricos se mantienen sincronizados.

Referencia y notas
  • Orden de operaciones. CSS aplica los filtros de izquierda a derecha, así que blur(4px) grayscale(50%) desenfoca el original y luego desatura el desenfoque. La página renderiza las capas en el orden canónico de CSS (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia) para que dos cadenas con las mismas capas activas siempre produzcan la misma cadena.
  • Valores de identidad (brightness 100 %, contrast 100 %, saturate 100 %, opacity 100 %, hue-rotate 0deg) no son visualmente distintos de "desactivado" — pero aún aparecen en la cadena si la capa está activa. Desactiva la capa si quieres una cadena más corta.
  • drop-shadow acepta <offset-x> <offset-y> <blur> <color>. El color es el último token que no se interpreta como número — #000, red, rgba(0,0,0,0.5) funcionan.
  • Preajustes sobrescriben cada capa activa que tocan y desactivan todas las demás, así que aplicar un preajuste siempre da un estado limpio. Activa capas individuales después de aplicar un preajuste para ajustar.
  • Importar. Pega cualquier valor filter: (con o sin el prefijo filter:) — los controles lo seguirán. Las funciones desconocidas o con prefijo de proveedor se ignoran silenciosamente.
  • La intensidad es una heurística, no una métrica perceptual. Es una suma de la desviación de cada capa activa respecto a su valor de identidad, comprimida a una escala 0–100. Útil como verificación rápida de "¿qué tan agresiva es esta cadena?", no como garantía.
  • La página está construida sobre src/lib/tools/css-filter.ts — cada helper tiene pruebas unitarias (37 casos). Nada sale de tu navegador.