Comment utiliser : Générateur de vignette CSS
- L’aperçu démarre avec une vignette radiale. Choisissez une ellipse (qui suit la forme de l’image) ou un cercle.
- Réglez Zone pleine (centre entièrement visible) et Fin du fondu à (là où l’image devient totalement transparente).
- Utilisez Projecteur pour décaler la zone visible hors du centre.
- Copiez le CSS.
Vignette avec mask-image
.vignette {
-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}Le centre reste entièrement visible jusqu’au premier point d’arrêt, puis devient transparent au second. Contrairement à une superposition sombre, une vignette par masque fond l’image dans l’arrière-plan réel de la page, elle fonctionne donc quelle que soit la couleur. Pour des fondus linéaires, consultez Estomper les bords d’une image avec CSS.
Aussi recherché comme : vignette css, effet vignette css, dégradé radial css, masque radial-gradient, générateur vignette css, vignette image css, fondu cercle image css.
Outils complémentaires : Générateur de vignette 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.
- Masque de forme d'image — Placez une photo à l'intérieur d'une forme — étoile, cœur, hexagone, cercle, flèche, bulle de dialogue… — à l'aide d'un mask-image 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 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 ajouter une vignette à une image en CSS ?
Appliquez un masque radial-gradient : mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%). Ajustez les deux points d’arrêt pour modifier la taille et la douceur.
Comment obtenir une vignette sombre au lieu d’une vignette transparente ?
Placez l’image sur un fond noir — le masque la fondra dans le noir — ou utilisez un dégradé radial en superposition avec box-shadow: inset.
Ellipse ou cercle ?
Une ellipse suit les proportions de l’image pour que tous les bords s’estompent uniformément ; un cercle donne un halo arrondi au centre.
Puis-je installer Générateur de vignette CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de vignette 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.