Cómo usar: Máscara de forma CSS
- Elige una forma: las mismas que el generador de clip-path, más un corazón.
- Sube Difuminado para un borde suave, o déjalo en 0 para un corte nítido.
- Cambia Tamaño para reducir la forma dentro del elemento y prueba Usar mi imagen.
- Copia el CSS: la forma es un SVG en línea, así que no necesitas ningún archivo adicional.
Máscaras de forma vs. clip-path
clip-path recorta una forma con bordes nítidos y es la opción más sencilla cuando necesitas bordes duros. Una máscara de forma usa un SVG como mask-image: puede tener bordes suaves y difuminados, se escala con mask-size, se posiciona con mask-position y funciona con cualquier forma SVG, incluso con tu propio logotipo (elige “Mi imagen o SVG como máscara”).
Para formas de bordes duros con puntos arrastrables, usa el Generador de Clip-path; para formas orgánicas, el Generador de blobs SVG.
También se busca como: máscara de forma de imagen css, forma de imagen css, mask image con forma css, imagen en forma de corazón css, imagen en forma de estrella, imagen hexágono css, recorte de forma css, css mask svg forma.
Herramientas que combinan con: Máscara de forma 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.
- Difuminar bordes de imagen CSS — Dale a tus fotos e imágenes destacadas bordes suaves y difuminados con una sola regla CSS, sin editar la imagen.
- Generador de Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
- Generador de triángulos CSS — Crea un triángulo solo con CSS para la flecha de un tooltip, el caret de un desplegable o un globo de diálogo: elige una de las 8 direcciones, el ancho, el alto y el color, y copia el truco del border clásico o una versión más sencilla con clip-path.
Preguntas frecuentes
¿Cómo pongo una imagen dentro de una forma de corazón o estrella?
Elige la forma aquí y copia el CSS: establece un SVG en línea de la forma como mask-image sobre tu imagen, así que solo se ve el interior de la forma.
¿Puede la forma tener bordes suaves?
Sí, sube el Difuminado. La forma SVG se desenfoca, así que la imagen se desvanece en el borde. clip-path no puede hacer esto; siempre genera bordes duros.
¿Puedo usar mi propia forma o logotipo?
Sí, elige “Mi imagen o SVG como máscara” y sube un PNG con transparencia o un SVG.
¿Puedo instalar Máscara de forma CSS como aplicación web y utilizarla sin conexión?
Sí. Máscara de forma 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.