Comment utiliser : Dégradé des bords d'image en CSS
- L'aperçu démarre avec Estomper tous les bords ; faites glisser Taille du fondu pour élargir ou réduire la bordure douce.
- Passez à l'effet sur un seul côté (par exemple le bas d'une image d'en-tête) ou sur le haut et le bas.
- Testez avec votre propre photo grâce à Utiliser mon image.
- Copiez le CSS sur l'image ou sur son conteneur.
Pourquoi estomper les bords avec un masque ?
Un masque en dégradé rend l'image elle-même transparente vers ce qui se trouve derrière elle — un fond de page, un dégradé ou une autre image — au lieu de superposer un calque coloré. Cela fonctionne sur tous les arrière-plans, dans les thèmes clair et sombre, sans modifier vos fichiers image.
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;
}Deux dégradés, l'un vertical et l'autre horizontal, sont combinés avec mask-composite: intersect pour estomper les quatre côtés. Pour des fondus circulaires de type vignette, utilisez le générateur de vignette CSS ; pour des formes, le masque de forme d'image.
Aussi recherché comme : dégradé bords image css, bords flous css, estomper image css, css fondu image, masque image css, image transparente bords css, fade image css, bordure douce image css.
Outils complémentaires : Dégradé des bords d'image en CSS
- 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.
- 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 clip-path CSS — Découpez images et éléments en n'importe quelle forme : choisissez l'une des 15 formes de départ (triangle, hexagone, étoile, flèche, chevron, bulle de dialogue, cercle, ellipse, rectangle arrondi en inset…), puis déplacez les points sur un exemple ou sur votre propre image.
- Générateur de filtre CSS — Ajustez le flou, la luminosité, le contraste, la saturation, la teinte, les niveaux de gris, le sépia, l’inversion et l’ombre portée sur un exemple ou sur votre propre image, puis copiez le CSS filter.
Questions fréquentes
Comment estomper les bords d'une image en CSS ?
Utilisez un masque en dégradé : mask-image: linear-gradient(...) allant de transparent à #000 puis revenant. Pour les quatre bords, combinez un dégradé vertical et un dégradé horizontal avec mask-composite: intersect, comme le fait ce générateur.
Comment estomper uniquement le bas d'une image ?
Choisissez « Estomper un bord » avec la direction Bas : mask-image: linear-gradient(to bottom, #000 60%, transparent).
Cela fonctionne-t-il avec les images de fond ?
Oui : appliquez le masque à l'élément qui possède le background-image ; l'élément entier, fond compris, s'estompe.
Puis-je installer Dégradé des bords d'image en CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Dégradé des bords d'image en 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.