Generador de filtros CSS
Controles de filtro
Core
Color
Vista previa en vivo
Sample
Live filter preview
Changes appear here immediately while you adjust the controls.
Estado
inactivo
Acerca del generador de filtros CSS
Los filtros CSS te permiten aplicar efectos visuales como desenfoque, contraste y rotación de tono directamente en el navegador.
Esta herramienta le ayuda a crear cadenas de filtro, obtener una vista previa de ellas en vivo y analizar los valores de filtro CSS existentes nuevamente en controles editables.
como usarlo
- Mueva los controles deslizantes o edite los valores manualmente.
- Vea la actualización de la vista previa en tiempo real.
- Haga clic en Generar para normalizar la cadena de filtro.
- Pegue un valor de filtro existente y haga clic en Analizar para editarlo.
Consejos
- Utilice el brillo y el contraste juntos para lograr cambios visuales más fuertes.
- La rotación de tono y la saturación son útiles para experimentos temáticos rápidos.
- La escala de grises y el sepia son útiles para efectos apagados o vintage.
- Los valores de desenfoque pequeños suelen verse mejor que los grandes en el trabajo de la interfaz de usuario.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador de animación CSS
Genere taquigrafía de animación CSS, fotogramas clave y CSS listo para usar con vista previa en vivo.
Utilidades varias
›
Generador de Transform CSS
Genere y analice valores de `transform` CSS como `translate`, `scale`, `rotate`, `skew` y `transform-origin`.
Utilidades varias
›
Generador de gradiente CSS
Genere, analice y obtenga una vista previa de degradados lineales y radiales CSS en línea. Generador de gradientes gratuito para desarrolladores y diseñadores.
Utilidades varias
›
Convertidor de colores
Convierta colores HEX, RGB, RGBA y HSL instantáneamente en su navegador.
Utilidades varias
›
Preguntas frecuentes
¿Qué filtros CSS son compatibles?
Esta herramienta admite desenfoque, brillo, contraste, escala de grises, rotación de tono, inversión, opacidad, saturación y sepia.
¿Puedo analizar un valor de filtro existente?
Sí. Pegue una cadena de filtro CSS en el área de entrada y haga clic en Analizar.
¿Está disponible la actualización de vista previa?
Sí. La vista previa se actualiza inmediatamente cuando cambia el control deslizante o los valores de texto.
¿La salida generada es CSS válida?
Sí. La herramienta genera un valor de filtro válido y una regla CSS lista para copiar.