Comment utiliser : Masque de forme d'image
- Choisissez une forme — les mêmes que le générateur clip-path, auxquelles s'ajoute le cœur.
- Augmentez Progressivité pour un bord doux, ou laissez-la à 0 pour une découpe nette.
- Modifiez la Taille pour réduire la forme à l'intérieur de l'élément, et essayez Utiliser mon image.
- Copiez le CSS : la forme est un SVG intégré, aucun fichier supplémentaire n'est nécessaire.
Masques de forme ou clip-path
clip-path découpe une forme aux bords nets et constitue l'option la plus simple lorsque vous avez besoin de bords durs. Un masque de forme utilise un SVG comme mask-image : il peut avoir des bords doux et progressifs, être mis à l'échelle avec mask-size et positionné avec mask-position, et fonctionne avec n'importe quelle forme SVG, même votre propre logo (choisissez « Mon image ou SVG comme masque »).
Pour des formes aux bords nets avec des points déplaçables, utilisez le générateur clip-path ; pour des formes organiques, le générateur de blob SVG.
Aussi recherché comme : masque de forme image, css forme image, mask image forme css, image en forme de cœur css, image forme étoile, image hexagone css, découpe forme css, css mask svg forme.
Outils complémentaires : Masque de forme d'image
- Générateur de masque CSS — Faites disparaître en fondu les images et les sections au lieu de les couper net : estompez un bord, le haut et le bas, les quatre bords, une vignette radiale ou un spot, découpez l'élément en rayures, ou appliquez un masque en forme (étoile, cœur, hexagone, flèche…) aux bords doux et progressifs que clip-path ne sait pas faire.
- Dégradé des bords d'image en CSS — Donnez à vos photos et images d'en-tête des bords doux et estompés avec une seule règle CSS, sans retouche d'image.
- Générateur border-radius — Arrondissez les coins de n'importe quel élément : utilisez un seul curseur pour tous les coins, ou réglez chaque coin séparément.
- Générateur triangle CSS — Créez un triangle en CSS pur pour une flèche d'infobulle, un caret de menu déroulant ou une bulle de dialogue : choisissez l'une des 8 directions, la largeur, la hauteur et la couleur, puis copiez soit l'astuce classique des bordures, soit une version plus simple en clip-path.
Questions fréquentes
Comment placer une image dans une forme de cœur ou d'étoile ?
Choisissez la forme ici et copiez le CSS : il définit un SVG intégré de la forme comme mask-image sur votre image, seul l'intérieur de la forme reste visible.
La forme peut-elle avoir des bords doux ?
Oui, augmentez Progressivité. La forme SVG est floutée, l'image s'estompe donc au bord. clip-path ne peut pas le faire : il découpe toujours des bords nets.
Puis-je utiliser ma propre forme ou mon propre logo ?
Oui, choisissez « Mon image ou SVG comme masque » et importez un PNG avec transparence ou un SVG.
Puis-je installer Masque de forme d'image en tant qu’application web et l’utiliser hors ligne ?
Oui. Masque de forme d'image est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.