Generador de filtro CSS

El generador de filtros CSS es un editor visual de la propiedad del filtro CSS. Mueve un control deslizante para cada función de filtro (borroso, brillo, contraste, saturado, escala de grises, sepia, inversión, rotación de tono y opacidad) y observa cómo el efecto se aplica a una vista previa en tiempo real, luego copia el CSS exacto que produce.

La propiedad Filter aplica efectos gráficos como desenfoque, cambio de color y ajuste de contraste directamente en el navegador, sin necesidad de editor de imágenes. Se pueden encadenar múltiples funciones en una sola declaración y se aplican en orden, que es como se construyen estilos de fotos, como vintage, cálidos y dramáticos. Esta herramienta administra esa cadena para usted y solo genera las funciones que realmente cambió, manteniendo el CSS limpio.

Todo sucede en su navegador. Comience desde una preset como vintage o escala de grises, ajuste cada función y copie la declaración. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.

Los filtros se aplican en el orden escrito y el orden cambia el resultado: escala de grises, entonces sepia no es lo mismo que sepia, luego escala de grises, porque el primero elimina el color que teñiría el segundo. Vale la pena saber que el gotcha es estructural más que visual. Cualquier elemento con un filtro distinto de ninguno se convierte en un bloque contenedor para sus descendientes fijos y absolutamente posicionados, por lo que un menú desplegable o modal dentro de un padre filtrado se posicionará contra ese padre en lugar de la ventana gráfica. También crea un nuevo contexto de apilamiento, que puede romper el orden del índice z que funcionaba antes. Si un filtro rompe un diseño de una manera que no tiene relación con la apariencia, casi siempre es por eso. Los filtros están acelerados por GPU en la mayoría de los navegadores, pero los radios borrosos grandes en elementos grandes siguen siendo costosos.