Comment utiliser : Générateur de masque CSS
- Choisissez un effet : estomper un bord, le haut et le bas, tous les bords, une vignette, un spot ou des rayures.
- Ajustez la taille du fondu, la direction, la position ou la largeur des rayures à l'aide des curseurs.
- Testez avec votre propre image grâce à Utiliser mon image.
- Copiez le CSS : il inclut
-webkit-mask-image, encore nécessaire à Chrome, Edge et Safari pour certaines propriétés.
Fonctionnement des masques CSS
mask-image utilise une image ou un dégradé comme pochoir : là où le masque est opaque, l'élément s'affiche ; là où il est transparent, l'élément disparaît, et entre les deux il s'estompe. Les dégradés sont les masques les plus pratiques, car ils ne nécessitent aucun fichier supplémentaire :
.hero {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}- Estomper tous les bords nécessite deux dégradés combinés avec
mask-composite: intersect(et-webkit-mask-composite: source-in), que le générateur ajoute automatiquement. - Les masques ne modifient ni la mise en page ni la détection des clics : la zone estompée reste cliquable.
- Contrairement à
opacity, un masque peut n'estomper qu'une partie d'un élément ; contrairement à un dégradé superposé, il laisse voir l'arrière-plan réel.
Masques de forme et clip-path
L'effet Forme transforme une forme clip-path en SVG intégré, utilisé comme mask-image. Le rendu ressemble à clip-path, mais le bord peut être adouci, et la forme peut être redimensionnée avec mask-size et répétée avec mask-repeat.
Pour découper des formes aux bords nets plutôt que les estomper, utilisez le Générateur clip-path. Pour les effets de couleur, le Générateur de filtres CSS.
Aussi recherché comme : mask-image generator, estomper bords image css, dégradé masque css, fondu image css, vignette css, mask image linear gradient, webkit mask image, masque css en ligne.
Outils complémentaires : Générateur de masque CSS
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur de vagues SVG — Concevez des séparateurs de sections ondulés pour vos pages d'accueil : ajoutez ou retirez des vagues (jusqu'à 6, chacune avec sa couleur, son opacité et sa forme), réglez le nombre de crêtes, la hauteur et le lissage, choisissez les couleurs et placez la vague en haut ou en bas.
- 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 de glassmorphism — Concevez une carte en verre dépoli avec des curseurs en direct et copiez un CSS compatible avec tous les navigateurs, avec le préfixe -webkit-backdrop-filter et une solution de repli pour les anciens navigateurs.
Questions fréquentes
Comment estomper les bords d'une image en CSS ?
Appliquez un masque en dégradé : mask-image: linear-gradient(to bottom, #000 70%, transparent) estompe le bas. Pour estomper tous les bords, combinez un dégradé horizontal et un dégradé vertical avec mask-composite: intersect : choisissez « Estomper tous les bords » ici.
A-t-on toujours besoin de -webkit-mask-image ?
Oui, pour une compatibilité optimale. Les navigateurs basés sur Chromium et Safari utilisent encore les versions -webkit- de certaines propriétés de masque, le générateur produit donc les deux.
Quelle est la différence entre mask-image et clip-path ?
clip-path découpe une forme aux bords nets ; mask-image peut estomper progressivement en utilisant un dégradé ou une image comme pochoir.
Comment donner des bords doux à une forme clip-path ?
clip-path produit toujours des bords nets. Choisissez l'effet Forme ici : les mêmes formes deviennent un masque SVG, et le curseur Contour adoucit son bord pour que l'image s'estompe en douceur.
Puis-je utiliser une image ou un SVG comme masque ?
Oui : choisissez « Mon image ou SVG comme masque » et importez un PNG avec transparence ou un SVG. Ses parties opaques affichent l'élément et ses parties transparentes le masquent ; définissez la taille, la répétition et la position du masque, puis copiez le CSS et indiquez votre fichier dans url().
Puis-je installer Générateur de masque CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de masque CSS 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.