Generador de Filtros CSS

Genera filtros CSS para cambiar el color de elementos SVG e imágenes

Color Objetivo

Genera filtros CSS para transformar elementos negros a este color

Filtro Generado

filter: invert(0%) sepia(100%) saturate(935%) hue-rotate(239deg) brightness(116%) contrast(100%);
invert:0%
sepia:100%
saturate:935%
hueRotate:239deg
brightness:116%
contrast:100%

Vista Previa

Original (Negro)

Con Filtro

★
●
▲
♦

Código CSS

.element {
  filter: invert(0%) sepia(100%) saturate(935%) hue-rotate(239deg) brightness(116%) contrast(100%);
}

/* For SVG icons starting from black */
.icon {
  filter: invert(0%) sepia(100%) saturate(935%) hue-rotate(239deg) brightness(116%) contrast(100%);
}

/* Hover effect */
.element:hover {
  filter: invert(0%) sepia(100%) saturate(935%) hue-rotate(239deg) brightness(116%) contrast(100%) brightness(120%);
}

Filtros Predefinidos

💡 Consejos

  • Los filtros CSS funcionan mejor con elementos negros (#000)
  • Útil para colorear iconos SVG sin modificar el archivo
  • Combina múltiples filtros para efectos más complejos
  • El orden de los filtros afecta el resultado final
  • Usa backdrop-filter para efectos en fondos

Cómo funciona

Los filtros CSS permiten cambiar el color de elementos sin modificar el archivo original.

¿Cuándo usar filtros CSS?

  • Cambiar color de iconos SVG externos
  • Colorear imágenes monocromáticas
  • Efectos hover sin múltiples archivos
  • Temas dinámicos con CSS variables

Filtros disponibles

filter: brightness() saturate() invert() sepia() hue-rotate();

💡 Ejemplos de uso prácticos

Caso 1: Iconos SVG de librería externa

Usas iconos de Font Awesome o similar en negro y necesitas que sean azules.

→ Genera filtro para #3B82F6
→ Aplica: filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(213deg)

Caso 2: Efecto hover en iconos

Quieres que los iconos cambien de gris a color primario en hover.

→ Normal: filter: grayscale(100%)
→ Hover: aplica el filtro del color deseado con transición suave

Caso 3: Tema dinámico con CSS variables

Cambiar color de iconos según el tema seleccionado.

→ Define: --icon-filter: [filtro generado]
→ Aplica: filter: var(--icon-filter)

Preguntas Frecuentes

¿Funciona con cualquier imagen?
Mejor con imágenes monocromáticas (negro/blanco). Con imágenes a color, los resultados pueden ser impredecibles.
¿Afecta al rendimiento?
Los filtros CSS son acelerados por GPU, pero muchos filtros en una página pueden afectar el rendimiento en dispositivos lentos.