Generador de Filtros CSS
Crea efectos de filtro CSS visualmente — blur, brillo, contraste, escala de grises y más.
① Arrastra los controles de filtro ② Sube tu imagen para previsualizar ③ Copia el CSS
Preajustes
filter: none
1x
1x
1x
0
0
0px
0°
0
1
Salida CSS
filter: none;
backdrop-filter (glassmorfismo)
backdrop-filter: none;
¿Qué es la propiedad CSS filter?
La propiedad CSS filter aplica efectos gráficos a cualquier elemento HTML — imágenes, divs, vídeos, SVGs o secciones completas. Soporta nueve funciones: blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity() y saturate(). Se encadenan separadas por espacios: filter: brightness(1.2) contrast(1.1) grayscale(0.3) — el orden importa. La propiedad está acelerada por GPU. Nota: filter crea un nuevo contexto de apilamiento que puede afectar el z-index.
Preguntas Frecuentes
La propiedad CSS filter aplica efectos visuales: blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, opacity y saturate.
Sí. CSS filter funciona en cualquier elemento HTML. Nota: filter crea un contexto de apilamiento que puede afectar el z-index.
Lista funciones separadas por espacio: filter: brightness(1.2) contrast(1.1) blur(2px). El orden importa.
hue-rotate(Ndeg) desplaza todos los colores en la rueda de color. 0deg = sin cambio, 180deg invierte los tonos.
CSS filter ofrece efectos simplificados. SVG filter es más potente con operaciones de composición arbitrarias.
CSS filter activa composición GPU. blur() es el más costoso con valores grandes en elementos grandes.
filter: sepia(0.5) contrast(1.2) brightness(1.05). Blanco y negro: filter: grayscale(1) contrast(1.1).