Generador de filtros CSS
Construye una cadena reordenable de funciones filter() y backdrop-filter() de CSS y previsualízala en vivo sobre tu propia foto, con una línea de CSS copiable y exportación a PNG.
🔒 Procesado íntegramente en su navegador: nada de lo que ingresa aquí se carga nunca.
Resultado
Todos los generadores de filtros CSS te permiten apilar blur(), brightness(), contrast() y el resto, pero casi ninguno deja que el orden importe, porque la mayoría solo aplica los filtros en una secuencia fija. Este es diferente: la cadena de filtros es una lista real y reordenable construida con arrastrar y soltar nativo de HTML5, y reordenar dos funciones cambia genuinamente los píxeles renderizados, exactamente como ocurriría en CSS de producción. Desenfocar y luego rotar el tono se ve distinto que rotar el tono y luego desenfocar, y ahora puedes ver por qué antes de publicarlo.
Sube tu propia foto y las nueve funciones encadenables — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert y drop-shadow — se aplican en vivo como una declaración CSS `filter` real sobre un elemento `<img>`, no una muestra simulada. Añade una función desde el selector, arrastra su fila hacia arriba o abajo en la lista para cambiar su posición en la cadena, ajusta su deslizador, y tanto la vista previa como la línea `filter: ...;` copiable se actualizan con cada entrada. Elimina un paso con su propio botón, directamente en la fila.
Una segunda cadena, más pequeña, construye un valor `backdrop-filter` aplicado a un panel superpuesto posicionado sobre la vista previa, para que puedas ver el efecto de vidrio esmerilado — la técnica detrás de las barras de navegación translúcidas y los fondos modales modernos — sin tocar la cadena de filtros de la imagen subyacente. Funciona incluso antes de que subas una foto, sobre el colorido fondo de marcador de posición, para que puedas definir un diseño de panel esmerilado en segundos.
Cuando la vista previa tenga el aspecto deseado, copia el CSS directamente de la caja de salida o exporta un PNG real: la misma cadena de filtros se pasa a la propiedad `ctx.filter` de un contexto Canvas 2D — que usa la sintaxis idéntica a la propiedad CSS `filter` — y el lienzo se convierte en un archivo descargable con `canvas.toBlob()`. La imagen exportada coincide exactamente con la vista previa en vivo, porque se produce con la misma cadena de filtros ejecutándose a través de la misma primitiva de renderizado. Todo ocurre localmente en tu navegador; tu foto nunca se sube a ningún servidor.