Cómo usar: Difuminar bordes de imagen CSS
- La vista previa empieza con Difuminar todos los bordes; arrastra Tamaño del difuminado para hacer el borde suave más ancho o más estrecho.
- Cambia el efecto para difuminar solo un lado (por ejemplo, la parte inferior de una imagen destacada) o arriba y abajo.
- Pruébalo con tu propia foto usando Usar mi imagen.
- Copia el CSS en la imagen o en su contenedor.
¿Por qué difuminar los bordes con una máscara?
Una máscara de degradado difumina la propia imagen hacia lo que hay detrás —el fondo de la página, un degradado u otra imagen— en lugar de pintar una capa de color encima. Funciona con cualquier fondo, en temas claros y oscuros, y no modifica tus archivos de imagen.
img.soft {
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent),
linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}Dos degradados —uno vertical y otro horizontal— se combinan con mask-composite: intersect para que se difuminen los cuatro lados. Para difuminados redondos tipo viñeta usa el Generador de viñeta CSS; para formas, la Máscara de forma de imagen.
También se busca como: difuminar bordes imagen css, css difuminar bordes, bordes suaves css imagen, desvanecer imagen css, efecto degradado imagen css, fade image edges css, máscara degradado css imagen, mask-image css bordes.
Herramientas que combinan con: Difuminar bordes de imagen CSS
- Generador de máscaras CSS — Haz que imágenes y secciones se desvanezcan en lugar de cortarse en seco: difumina un borde, arriba y abajo, los cuatro bordes, una viñeta radial o un foco, corta el elemento en franjas, o enmascáralo con una forma (estrella, corazón, hexágono, flecha…) con bordes suaves y difuminados que clip-path no puede lograr.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de clip-path CSS — Recorta imágenes y elementos en cualquier forma: elige una de 15 formas iniciales (triángulo, hexágono, estrella, flecha, chevron, bocadillo, círculo, elipse, inset redondeado…) y luego arrastra los puntos sobre una muestra o sobre tu propia imagen.
- Generador de filtros CSS — Ajusta blur, brillo, contraste, saturación, tono, escala de grises, sepia, invertir y sombra paralela sobre una imagen de ejemplo o la tuya y copia el CSS de filter.
Preguntas frecuentes
¿Cómo difumino los bordes de una imagen con CSS?
Usa una máscara de degradado: mask-image: linear-gradient(...) de transparent a #000 y de vuelta. Para los cuatro bordes, combina un degradado vertical y otro horizontal con mask-composite: intersect, como hace este generador.
¿Cómo difumino solo la parte inferior de una imagen?
Elige «Difuminar un borde» con dirección Abajo: mask-image: linear-gradient(to bottom, #000 60%, transparent).
¿Funciona con imágenes de fondo?
Sí: aplica la máscara al elemento que tiene el background-image; todo el elemento, incluido el fondo, se difumina.
¿Puedo instalar Difuminar bordes de imagen CSS como aplicación web y utilizarla sin conexión?
Sí. Difuminar bordes de imagen CSS es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.