¿Qué son los filtros CSS?

Los filtros CSS te permiten aplicar efectos gráficos como el desenfoque o el cambio de color a un elemento. Se utilizan habitualmente para imágenes, fondos y bordes.

Los filtros se pueden utilizar para crear efectos visuales, mejorar imágenes o crear elementos de diseño únicos sin necesidad de herramientas de edición de imágenes externas.

de filtro CSS compatibles

• blur(): aplica un desenfoque gaussiano al elemento.
• brightness()- Ajusta el brillo del elemento.
• contrast()- Ajusta el contraste del elemento.
• grayscale()- Convierte el elemento a escala de grises.
• hue-rotate()- Aplica una rotación de tono al elemento.
• invert()- Invierte los colores del elemento.
• opacity()- Ajusta la opacidad del elemento.
• saturate()- Satura o desatura el elemento.
• sepia()- Convierte el elemento en sepia.

Cómo aplicar filtros

Usando el código CSS generado por esta herramienta, puede aplicar filtros a cualquier elemento HTML. A continuación, te explicamos cómo hacerlo:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Compatibilidad con navegadores Los

filtros CSS son ampliamente compatibles con los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Sin embargo, los navegadores más antiguos como Internet Explorer no los admiten.