Generador de Filtros CSS

Genera filtros CSS para cambiar el color de elementos SVG e imágenes. Incluye glassmorfismo y 20+ presets.

Color Objetivo

Genera filtros CSS para transformar elementos negros a este color

ΔE 153.6

Filtro Generado

filter: invert(100%) sepia(108%) saturate(1011%) hue-rotate(191deg) brightness(117%) contrast(116%);
invert:100%
sepia:108%
saturate:1011%
hueRotate:191deg
brightness:117%
contrast:116%

Vista Previa

Original (Negro)

Con Filtro

★
●
▲
♦
♥
vs
Objetivo
Resultado

Mockup UI con filtro aplicado

★◆●
☰
▶

Código CSS

.element {
  filter: invert(100%) sepia(108%) saturate(1011%) hue-rotate(191deg) brightness(117%) contrast(116%);
}

.icon {
  filter: invert(100%) sepia(108%) saturate(1011%) hue-rotate(191deg) brightness(117%) contrast(116%);
}

.element:hover {
  filter: invert(100%) sepia(108%) saturate(1011%) hue-rotate(191deg) brightness(117%) contrast(116%) brightness(120%);
  transition: filter 0.3s ease;
}

Filtros Predefinidos

Click para copiar · Básicos · Foto · Creativos

Backdrop Filter (Glassmorfismo)

backdrop-filter aplica efectos al área detrás de un elemento, creando efectos de cristal.

Glassmorphism

backdrop-filter: blur(12px)

.glass-card {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

💡 Consejos

  • Los filtros CSS funcionan mejor con elementos fuente negros (#000)
  • Útil para colorear iconos SVG sin modificar el archivo
  • El orden importa: invert → sepia → saturate → hue-rotate → brightness → contrast
  • Usa backdrop-filter para efectos glassmorfismo sobre fondos
  • Haz clic en "Recalcular" (↻) si la precisión es baja — cada ejecución puede encontrar mejor solución
  • Los filtros se aceleran por GPU pero evita uso excesivo en móvil

🌐 Soporte de Navegadores

filter:✓ Todos los navegadores modernos
backdrop-filter:✓ Chrome, Safari, Edge, Firefox 103+

Cómo funciona

Los filtros CSS (filter) son funciones que transforman la apariencia visual de un elemento sin modificar su contenido. Son fundamentales para colorear iconos SVG, crear efectos fotográficos y construir interfaces con glassmorfismo.

Pipeline de Filtros CSS

Los filtros se aplican en orden secuencial. Cada función transforma el resultado de la anterior:

invert() → sepia() → saturate() → hue-rotate() → brightness() → contrast()

Cambiar el orden produce resultados completamente diferentes. Nuestro algoritmo multi-restart hill-climbing con paso grueso + fino optimiza esta cadena automáticamente.

filter vs backdrop-filter

filter

Transforma el elemento y sus hijos. Ideal para iconos, imágenes y formas.

.icon { filter: hue-rotate(90deg); }

backdrop-filter

Transforma el área detrás del elemento. Crea efectos de cristal (glassmorfismo).

.glass { backdrop-filter: blur(12px); }

¿Cuándo usar filtros CSS?

  • Iconos SVG externos — Cambiar color sin editar el archivo SVG
  • Hover states — Transiciones de gris a color primario
  • Temas dinámicos — Usar CSS variables con filtros generados
  • Efectos fotográficos — Vintage, noir, faded sin canvas
  • Glassmorfismo — Blur + saturate en fondos traslúcidos

💡 Ejemplos de uso prácticos

Caso 1: Colorear iconos SVG de librería

Tienes iconos de Font Awesome o Heroicons en negro y necesitas adaptarlos a tu marca.

.brand-icon { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(213deg) brightness(96%) contrast(101%); } .brand-icon:hover { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(213deg) brightness(120%) contrast(101%); transition: filter 0.3s ease; }

Caso 2: Tema dinámico con CSS custom properties

Cambiar todos los iconos según el tema activo.

:root { --icon-filter: invert(39%) sepia(80%) saturate(500%) hue-rotate(140deg) brightness(95%); } [data-theme="dark"] { --icon-filter: invert(90%) sepia(10%) brightness(120%); } .icon { filter: var(--icon-filter); }

Caso 3: Glassmorfismo con backdrop-filter

Crear tarjetas con efecto cristal sobre fondos coloridos.

.glass-card { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; }

Rendimiento y buenas prácticas

  • Los filtros CSS son acelerados por GPU — generalmente muy rápidos
  • Evita aplicar blur() con valores altos en muchos elementos simultáneamente
  • Usa will-change: filter para optimizar animaciones de filtro
  • backdrop-filter requiere prefijo -webkit- para Safari

Preguntas Frecuentes

¿El filtro funciona con cualquier imagen?
La conversión color → filtro funciona mejor con imágenes monocromáticas (negro/blanco). Para imágenes a color, los presets de estilo fotográfico (vintage, noir, etc.) son más adecuados. El algoritmo parte de negro (#000) como base, así que elementos oscuros producen los resultados más precisos.
¿Afectan los filtros CSS al rendimiento?
Los filtros CSS son acelerados por GPU y generalmente muy eficientes. Sin embargo, blur() con valores altos y muchos elementos filtrados simultáneamente pueden causar caídas de FPS en dispositivos móviles. Usa will-change: filter para optimizar animaciones.
¿Qué significa el valor ΔE de precisión?
ΔE (Delta E) mide la diferencia perceptual entre el color objetivo y el color resultante del filtro. ΔE < 5 es excelente (visualmente idéntico), ΔE 5-15 es aceptable, y ΔE > 15 tiene diferencia notable. Puedes hacer clic en "Recalcular" para intentar obtener mejor resultado.
¿Cuál es la diferencia entre filter y backdrop-filter?
filter transforma el elemento y su contenido (ideal para iconos/imágenes). backdrop-filter transforma el área detrás del elemento (ideal para glassmorfismo). Ambos aceptan las mismas funciones (blur, saturate, etc.) pero se aplican en direcciones opuestas.
¿Por qué hay un modo "Auto" y otro "Manual"?
El modo Auto calcula automáticamente los filtros necesarios para transformar negro al color elegido — perfecto para colorear iconos SVG. El modo Manual te da control directo sobre cada filtro individual — ideal para experimentar con efectos fotográficos y ajustes creativos.
¿Puedo animar transiciones entre filtros?
Sí. CSS permite transiciones suaves entre valores de filter con transition: filter 0.3s ease. Esto es perfecto para efectos hover. Para animaciones complejas, usa @keyframes combinando diferentes valores de filtro en cada fotograma.