Generador de filtros CSS
Construye una declaración CSS filter o backdrop-filter desde controles visuales.
Generador de filtros CSS
Esta herramienta construye una declaración CSS filter (o backdrop-filter) lista para pegar desde un conjunto de controles visuales, para que no tengas que recordar la sintaxis para combinar desenfoque, brillo, contraste, escala de grises, rotación de matiz, invertir, opacidad, saturación, sepia y sombra proyectada en una propiedad. Está diseñada para cualquiera que diseñe una galería de fotos, un efecto hover, un panel de vidrio esmerilado o un tratamiento de imagen temático sin escribir la lista de funciones de filtro manualmente.
Cada función tiene su propio campo, y el valor generado solo enumera las que realmente has cambiado — entonces una página con solo un pequeño desenfoque permanece corta en lugar de listar nueve funciones sin efecto. El campo de orden de funciones controla el orden en que se ejecutan, ya que los filtros CSS se aplican de izquierda a derecha y reordenarlos (desenfocar antes o después de ajustar el contraste, por ejemplo) puede cambiar el resultado visual. Dos preestablecidos, vintage y blanco y negro, establecen un grupo completo de valores a la vez para un aspecto común. Alterna "backdrop-filter" para filtrar lo que hay detrás de un elemento en lugar del elemento en sí — la opción estándar para paneles de glassmorphism — y cambia el formato de salida para obtener una clase de valor arbitrario de Tailwind en lugar de una línea CSS simple.
Los campos numéricos se fijan automáticamente en rangos sensatos, por lo que un valor accidentalmente enorme o negativo nunca rompe la salida; el campo de color de sombra proyectada acepta cualquier valor de color CSS. El resultado se actualiza en vivo a medida que ajustas cualquier opción, y el recuento anterior a la salida cuenta cuántas funciones están realmente activas.
Todo se ejecuta localmente en tu navegador — nada de lo que ingreses aquí se carga ni se envía a ningún lugar. Copia el resultado, descárgalo como archivo .txt o envíalo a la entrada de otra herramienta para seguir trabajando en él.