a11y.skipToMainContent
1

CSS Filter Generator

Carne en los filtros de imagen CSS visualmente y copiar la propiedad del filtro — vista previa en una muestra o su propia imagen.

Presets

Filters

px
%
%
%
deg
%
%
%
%

Preview subject

Preview

🌈

CSS

Was this tool helpful?
Send Image to:
Advertisement

How to use CSS Filter Generator

  1. Arrastre los deslizadores para bordar, brillo, contraste y las otras funciones de filtro para construir su efecto.
  2. Opcionalmente habilitar la sombra de gota y establecer su offset, borrón y color.
  3. Haga clic en 'Use sample' o cargue su propia imagen para previsualizar el filtro en contenido real.
  4. Haga clic en Copiar CSS para agarrar la propiedad de filtro generada.

¿Cómo se llama?

El Generador de Filtros CSS le permite apilar efectos gráficos en cualquier elemento utilizando la propiedad de títulos codificado especificado/code relativo. Arrastre los toboganes para difuminar, brillo, contraste, grayscale, hue-rotate, invert, opacity, saturate y sepia, a continuación, opcionalmente agregue un codificador titulado > > con su propio offset, borrón y color. Cada cambio actualiza la vista previa en vivo al instante. Pruebe en la muestra colorida incorporada, o suba su propia imagen para ver exactamente cómo el filtro mira el contenido real antes de enviarlo. La imagen permanece en su dispositivo — nada se carga en un servidor. Comience desde un preset como vintage, B plaga, cálido, frío, dramático o desenfoque para acercarse rápido, luego fino. Cuando se ve bien, copie la declaración de un solo código especificado/código indica directamente en su hoja de estilo
Advertisement

FAQ

¿Qué hace la propiedad filtrante CSS?
filtro aplica efectos gráficos como borrón, brillo, contraste, grayscale, hue-rotate y drop-shadow a un elemento antes de que se renderice. Usted puede combinar varias funciones en una declaración, y se aplican en el orden que usted enumera.
¿Mi imagen subida se envía a cualquier lugar?
No. La imagen está cargada con una URL de objeto local puramente para la vista previa y nunca deja su navegador. Toda la herramienta funciona al lado del cliente, por lo que sus archivos permanecen privados en su dispositivo.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Filter Generator on Wikipedia·Developer Tools on Wikipedia·CSS Filter Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement