Generador de filtros CSS

Edita imágenes directamente con CSS: brillo, contraste, blanco y negro, sepia, desenfoque y más, con presets al estilo Instagram. Copia el CSS o las clases de Tailwind.

¿Qué es filter?

La propiedad filter aplica efectos gráficos a un elemento (y a todo su contenido) sin modificar el archivo original. Puedes combinar varias funciones separadas por espacios; se aplican en orden:

.imagen {
  filter: sepia(50%) contrast(110%) brightness(105%);
}

Función	Qué hace	Valor neutro
blur()	Desenfoca	0
brightness()	Aclara u oscurece	100%
contrast()	Sube o baja el contraste	100%
saturate()	Intensidad de los colores	100%
grayscale()	Blanco y negro	0%
sepia()	Tono antiguo marrón	0%
hue-rotate()	Gira todos los colores en la rueda	0deg
invert()	Negativo	0%
opacity()	Transparencia	100%
drop-shadow()	Sombra que sigue la silueta	—

Generador

Prueba un preset y ajusta cada filtro. Activa Comparar antes / después y mueve la línea de corte para ver la diferencia. El código sólo incluye los filtros que cambiaste.

Generador de filtros CSS

Filtros

Desenfoque (blur)pxBrillo (brightness)%Contraste (contrast)%Saturación (saturate)%Escala de grises%Sepia%Rotar tono (hue-rotate)degInvertir (invert)%Opacidad%

Sombra (drop-shadow)

Comparar antes / después

.imagen {
  filter: none;
}

Consejos de uso

• Efectos en hover: una galería en blanco y negro que recupera el color al pasar el ratón (grayscale(100%) → none) es un clásico de portafolios.
• Oscurecer una foto de fondo para que el texto encima se lea: filter: brightness(60%).
• drop-shadow() vs box-shadow: drop-shadow sigue la forma real de PNG y SVG transparentes (logos, íconos, recortes); box-shadow siempre es rectangular.
• Íconos de un color a otro: con invert() y hue-rotate() puedes recolorear íconos negros sin editar el archivo.
• El orden importa: grayscale(100%) sepia(60%) no da lo mismo que sepia(60%) grayscale(100%).
• filter también sirve en videos, iframes y cualquier elemento HTML, no sólo en imágenes.

Buena práctica

Añade transition: filter 0.3s ease; para que los cambios de filtro (por ejemplo en hover) sean suaves. Y usa backdrop-filter (ver glassmorphism) cuando quieras filtrar lo que hay detrás de un elemento, no el elemento mismo.

Error común

filter afecta a todo el contenido del elemento, incluidos el texto y los hijos. Si aplicas blur() a una tarjeta, su texto también se desenfoca. Aplica el filtro sólo a la <img> que está dentro de la tarjeta, o a un pseudoelemento de fondo. Además, blur() grande en elementos enormes puede afectar el rendimiento en móviles.