Question 1

¿Qué funciones de filtro CSS están disponibles?

Accepted Answer

CSS filter soporta: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate y sepia. Puedes combinar múltiples filtros en una sola propiedad filter y se aplican en el orden listado.

Question 2

¿La propiedad CSS filter afecta el rendimiento?

Accepted Answer

Los filtros CSS están acelerados por GPU en navegadores modernos, pero el blur intenso o múltiples filtros apilados pueden impactar el rendimiento de renderizado, especialmente en móviles. Para animaciones, usa will-change: filter para optimizar.

Question 3

¿Puedo aplicar filtros CSS solo al fondo (no a elementos hijos)?

Accepted Answer

No, la propiedad filter se aplica a todo el elemento incluyendo sus hijos. Para filtrar solo el fondo, usa backdrop-filter para efecto glassmorphism, o aísla el fondo en un pseudoelemento separado.

Question 4

¿Cuál es la diferencia entre filter: opacity() y la propiedad opacity?

Accepted Answer

Ambas controlan la transparencia, pero filter: opacity() usa aceleración de hardware y puede combinarse con otras funciones filter. La propiedad opacity es más simple y crea un nuevo contexto de apilamiento. Para opacidad sola, se prefiere la propiedad opacity.

Question 5

¿Se pueden usar filtros CSS en elementos SVG?

Accepted Answer

Sí. Los filtros CSS se aplican a elementos SVG igual que a elementos HTML. Además, SVG tiene sus propios primitivos de filtro (feBlur, feColorMatrix, etc.) que ofrecen mayor control que los atajos de filtro CSS.

Generador de Filtros CSS

Filtros

Preguntas Frecuentes

Comments & Feedback