Generador de Filtros CSS
El Generador de Filtros CSS te permite crear y combinar efectos de filter de CSS de forma visual, con una vista previa de imagen en vivo para que nunca tengas que adivinar los valores. Ajusta desenfoque, brillo, contraste, color y más, y luego copia la propiedad filter exacta directamente en tu hoja de estilos.
Está pensado para desarrolladores front-end y diseñadores que quieren afinar efectos de imagen y de hover sin el ciclo de editar-guardar-recargar. Cada función de filtro estándar tiene su propio control deslizante y campo numérico, y diez ajustes listos para usar te dan un estilo pulido desde el que partir.
Cómo usar el Generador de Filtros CSS
Ajusta los filtros
Arrastra cualquier control deslizante para cambiar un filtro, o escribe una cifra exacta en su campo numérico. La vista previa de la imagen y el CSS generado se actualizan en tiempo real mientras lo haces.
Parte de un ajuste (opcional)
Haz clic en la miniatura de un ajuste —como Vintage, Noir o Dramático— para aplicar un estilo listo para usar y luego afina los filtros individuales desde ahí.
Activa y compara
Usa la casilla de verificación de cada filtro para activarlo o desactivarlo sin perder su valor, y mantén pulsado el botón de ojo para echar un vistazo a la imagen original sin filtros.
Copia el CSS
La propiedad filter completa aparece debajo de la vista previa. Haz clic en Copiar para enviarla a tu portapapeles, lista para pegar en tu hoja de estilos.
Funciones
Nueve controles de filtro
Control total sobre desenfoque, brillo, contraste, escala de grises, rotar tono, invertir, opacidad, saturación y sepia, cada uno con su propio control deslizante y campo numérico.
Vista previa de imagen en vivo
Ve cada cambio aplicado al instante sobre una imagen real, sin necesidad de escribir código, guardar y recargar.
Diez ajustes integrados
Parte de Original, Vintage, Noir, Cálido, Frío, Dramático, Desvaído, Alto contraste, Soñador o Invertir, cada uno mostrado como una miniatura de vista previa.
Activación de filtros individuales
Activa o desactiva cualquier filtro con una casilla de verificación para aislar y comparar su efecto, sin perder el valor que estableciste.
Comparación Antes / Después
Mantén pulsado el botón de ojo para ver la imagen original y suéltalo para volver a tu versión filtrada. Funciona con ratón y con pantalla táctil.
Subida de imágenes propias
Carga tu propia imagen para probar los filtros sobre contenido real. Se lee localmente en tu navegador y nunca se sube.
Restablecer con un clic
El botón Restablecer devuelve cada filtro a su valor por defecto para que puedas empezar un efecto nuevo en cualquier momento.
Exportación de CSS con un clic
La propiedad filter generada se actualiza en vivo y se copia a tu portapapeles con un solo clic.
Modo oscuro y adaptable
Un tema oscuro integrado y un diseño adaptable mantienen la herramienta cómoda de usar en escritorio y móvil.
Preguntas frecuentes
¿Qué filtros CSS admite este generador?
Cubre nueve funciones de filtro CSS estándar: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate() y sepia().
¿Cómo combino varios filtros CSS?
Ajusta tantos filtros como quieras a la vez. La propiedad filter de CSS admite encadenar funciones, y la herramienta las escribe automáticamente en una sola declaración filter combinada.
¿Cómo desenfoco una imagen en CSS?
Aumenta el control deslizante Desenfoque, que se traduce en filter: blur() en píxeles (hasta 20px aquí). Observa la vista previa y luego copia la propiedad generada, por ejemplo filter: blur(4px);.
¿Cómo pongo una imagen en escala de grises en CSS?
Pon el control deslizante Escala de grises al 100%, lo que produce filter: grayscale(100%); para una imagen totalmente en blanco y negro. Cualquier valor intermedio da una desaturación parcial. El ajuste Noir lo combina con un aumento de contraste.
¿Qué hacen los ajustes?
Los ajustes son combinaciones de filtros predefinidas que crean estilos populares. Vintage, por ejemplo, mezcla sepia con brillo, contraste y saturación ajustados. Aplica uno como punto de partida y luego retoca los filtros individuales a tu gusto.
¿Se envía a un servidor la imagen que subo?
No. Cuando subes una imagen se lee localmente con el FileReader de tu navegador y se muestra solo en la vista previa. La imagen nunca sale de tu dispositivo ni se sube a ningún sitio.
¿Cómo restablezco todos los filtros?
Haz clic en el botón Restablecer en el panel de ajustes para devolver cada filtro a su valor por defecto, dejando la imagen sin ningún efecto aplicado.
¿Qué navegadores admiten los filtros CSS?
La propiedad filter de CSS funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge, así que el código que copias aquí es seguro para publicar.
Aún no hay comentarios. ¡Sé el primero en comentar!