devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoría web

Generador de filtros CSS — Efectos de imagen y color a filtro

Ajusta blur, brillo, contraste, saturación, tono, escala de grises, sepia, invertir y sombra paralela sobre una imagen de ejemplo o la tuya y copia el CSS de filter. ¿Necesitas un icono SVG o PNG en un color de marca? Color a filtro convierte cualquier color hex en un filtro que recolorea iconos negros.

Actualizado el
Imagen de vista previa

CSS


  

  


    
 Tus datos nunca salen de tu ordenador. Todo se procesa localmente en tu navegador.

    
    
    

      
Cómo usar: Generador de filtros CSS
  1. Efectos de imagen: arrastra los deslizadores (o elige un preajuste) y observa la vista previa. Haz clic en Usar mi imagen para probarlo con tu propia foto; se queda en tu dispositivo.
  2. Color hex a filtro: introduce un color como #4f46e5. La herramienta encuentra un filter que convierte un icono negro en ese color.
  3. Copia el CSS y aplícalo a un <img>, un SVG o cualquier elemento.


Funciones de filtro CSS


FunciónEfectoPor defecto


blur(4px)Desenfoque gaussiano0


brightness(120%), contrast(110%)más claro/oscuro, más/menos contraste100%


saturate(150%), grayscale(100%)más/menos color100%, 0


hue-rotate(90deg)desplaza todos los colores por la rueda cromática0deg


sepia(60%), invert(100%)tono marrón cálido, negativo0


drop-shadow(0 8px 12px #0006)una sombra que sigue la transparencia de la imagenninguno




Los filtros se aplican en orden, de izquierda a derecha, así que grayscale(100%) sepia(60%) no es lo mismo que al revés.


Recolorear iconos con un filtro
No puedes establecer color en un <img src="icon.svg">, pero sí puedes filtrarlo. Partiendo del negro, una cadena como invert() sepia() saturate() hue-rotate() brightness() contrast() puede llegar casi a cualquier color; esta herramienta busca los valores con la menor diferencia visible. Si controlas el SVG, fill="currentColor" es más sencillo: el optimizador de SVG puede hacerlo por ti.
También se busca como: color hex a filtro css, cambiar color svg css filter, filtro css imagen, filter brightness contrast, escala de grises css, color a filter css, filtro css negro a color.
Herramientas que combinan con: Generador de filtros CSS
  • Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
  • Generador de Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
  • Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
  • Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
Preguntas frecuentes
¿Cómo cambio el color de un icono SVG o PNG con CSS?
Si el icono es negro, usa Color hex a filtro: introduce tu color y aplica el filtro generado al img. Para SVG en línea, define fill="currentColor" y usa en su lugar la propiedad CSS color.
¿Por qué el color del filtro no es exacto?
Los filtros solo pueden aproximar algunos colores. La herramienta muestra la diferencia; vuelve a ejecutar la búsqueda para un resultado más cercano. Los resultados marcados como “Perfect” son indistinguibles a simple vista.
¿Los filtros CSS funcionan en cualquier elemento?
Sí: imágenes, vídeos, SVG, texto y secciones completas. Ten en cuenta que los filtros crean un nuevo contexto de apilamiento y pueden afectar al rendimiento en áreas muy grandes.
¿Cuál es la diferencia entre box-shadow y drop-shadow?
box-shadow sigue el rectángulo del elemento; filter: drop-shadow sigue los píxeles visibles, así que se ajusta a las formas transparentes de PNG y SVG.
¿Puedo instalar Generador de filtros CSS como aplicación web y utilizarla sin conexión?
Sí. Generador de filtros CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.

      
    

    
    
Herramientas relacionadas
localConversor de coloresPega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante…localGenerador de Border RadiusRedondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina…localGenerador de Box ShadowApila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre…localOptimizador SVGLimpia los SVG exportados desde Figma, Illustrator, Inkscape o Sketch con SVGO y revisa la vista previa…localGenerador de Gradientes CSSDiseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un…localCompresor de imágenesReduce el tamaño de las fotos y los gráficos entre un 50 % y un 90 % sin que se note ninguna pérdida de…