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 del filtro 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 los estilos de fotos como vintage, cálido y dramático. Esta herramienta gestiona esa cadena por usted y genera solo las funciones que cambió, manteniendo limpio el CSS.

Todo sucede en tu navegador. La página se abre en el preajuste Vintage; elija otro preajuste, 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.

Aquí está el generador de filtros CSS en una mirada fotográfica cálida. Haga clic en el filtro de lecturas CSS generadas y preestablecidas cálidas: brillo (105%) saturado (140%) sepia (25%); con la vista previa cambiando hacia el ámbar. Arrastre Blur a 2px y la línea se convertirá en filtro: brillo (2px) brillo (105%) saturado (140%) sepia (25%);. Haga clic en Ninguno o presione Restablecer y volverá al filtro: ninguno; Debido a que la vista previa es una muestra de color fija en lugar de su propia foto, verifique el CSS copiado en la imagen real antes de enviarla.

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 y 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 se aceleran por GPU en la mayoría de los navegadores, pero los radios borrosos grandes en elementos grandes siguen siendo costosos. Esta herramienta siempre escribe las funciones en un orden fijo, primero se desenfoca y al final la opacidad, por lo que no puede producir sepia antes de la escala de grises; Reordene las funciones a mano después de copiarlas si lo necesita.