Generador de Filtros CSS

Información sobre Filtros CSS

¿Qué son los Filtros CSS?

La propiedad filter de CSS permite aplicar efectos gráficos como desenfoque o cambios de color a un elemento. Los filtros se utilizan comúnmente en imágenes, fondos y bordes.

Los filtros CSS son una forma poderosa de modificar la apariencia visual de los elementos sin necesidad de editar las imágenes originales, lo que permite mantener un flujo de trabajo no destructivo y optimizado.

Funciones de Filtro Disponibles

blur(): Aplica un desenfoque gaussiano a la imagen. Valor en píxeles (px).
brightness(): Ajusta el brillo. 0% es completamente negro, 100% es el valor original, y valores superiores aumentan el brillo.
contrast(): Ajusta el contraste. 0% es completamente gris, 100% es el valor original.
grayscale(): Convierte la imagen a escala de grises. 100% es completamente en escala de grises.
hue-rotate(): Aplica una rotación de tono. El valor se especifica en grados.
invert(): Invierte los colores. 100% invierte completamente todos los colores.
opacity(): Ajusta la opacidad. 0% es completamente transparente, 100% es completamente opaco.
saturate(): Ajusta la saturación. 0% es completamente desaturado, 100% es el valor original.
sepia(): Convierte la imagen a sepia. 100% es completamente sepia.
drop-shadow(): Aplica una sombra que sigue la forma del elemento (a diferencia de box-shadow).
url(): Aplica un filtro SVG desde un archivo SVG o un elemento SVG en línea.

Casos de Uso Comunes

Efectos de Hover

Añadir efectos visuales cuando el usuario pasa el cursor sobre un elemento:

.img-hover {
  transition: filter 0.3s;
}

.img-hover:hover {
  filter: brightness(120%) saturate(120%);
}

Fondos de Modal

Desenfocar el fondo cuando se muestra un modal:

.modal-open .page-content {
  filter: blur(5px) brightness(80%);
}

Ajustes para Modo Oscuro

Ajustar imágenes para que se vean mejor en modo oscuro:

.dark-mode img {
  filter: brightness(85%) contrast(110%);
}

Ejemplos de Efectos Creativos

Los filtros CSS pueden combinarse para crear efectos visuales impresionantes. Aquí hay algunos ejemplos:

Efecto Acuarela

filter: brightness(130%) invert(17%) saturate(260%) sepia(25%);

Este efecto da a las imágenes un aspecto suave y artístico similar a una pintura de acuarela.

Efecto Infrarrojo

filter: hue-rotate(180deg) saturate(200%);

Simula el aspecto de fotografía infrarroja con colores invertidos y alta saturación.

Efecto Umbral (Threshold)

filter: brightness(150%) grayscale(100%) contrast(1000%);

Convierte la imagen en blanco y negro puro, sin tonos grises, creando un efecto de alto contraste.

Efecto Vintage

filter: sepia(50%) contrast(120%) brightness(95%) saturate(85%);

Da a las imágenes un aspecto retro, como si hubieran sido tomadas hace décadas.

Combinando Múltiples Filtros

Puedes combinar varios filtros en una sola declaración. El orden de aplicación es importante, ya que cada filtro se aplica secuencialmente de izquierda a derecha.

filter: contrast(175%) brightness(103%) saturate(110%) sepia(15%);

Compatibilidad con Navegadores

Los filtros CSS son compatibles con la mayoría de los navegadores modernos, pero es posible que necesites usar prefijos de proveedor para navegadores más antiguos:

-webkit-filter: blur(5px); /* Safari */
filter: blur(5px);

Para Internet Explorer, que no soporta filtros CSS, puedes usar SVG filters como alternativa o proporcionar una experiencia degradada.

Consejos para Usar Filtros CSS

Rendimiento: Los filtros pueden afectar el rendimiento, especialmente en dispositivos móviles. Usa con moderación y prueba en diferentes dispositivos.
Transiciones: Puedes animar filtros con transiciones CSS para efectos suaves.
Accesibilidad: Asegúrate de que el uso de filtros no afecte la legibilidad o la accesibilidad de tu contenido.
Pruebas: Prueba tus filtros en diferentes navegadores y dispositivos para asegurar una experiencia consistente.

Filtros SVG Avanzados

Además de los filtros CSS estándar, puedes utilizar filtros SVG para efectos más avanzados y personalizados:

Efecto de Grano

<filter id="grain">
  <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" />
  <feBlend mode="multiply" in="SourceGraphic" result="blend" />
</filter>

Añade un efecto de grano a las imágenes, similar a la película fotográfica.

Efecto de Ondulación

<filter id="squiggly">
  <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="2" />
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>

Crea un efecto de ondulación o distorsión sutil en la imagen.

Para usar estos filtros SVG, defínelos en un elemento SVG en tu HTML y luego aplícalos con la función url():

.grain-effect {
  filter: url('#grain');
}

/* O combinado con otros filtros */
.vintage-grain {
  filter: url('#grain') sepia(50%) contrast(120%);
}