Comment utiliser : Générateur clip-path CSS
- Choisissez une forme de départ : polygones, cercle, ellipse ou rectangle arrondi (inset).
- Déplacez les points sur l'image. Sélectionnez un point puis utilisez + Ajouter un point pour en insérer un après lui, ou Supprimer le point. Partez du rectangle pour dessiner votre propre forme.
- Pour les cercles, ellipses et insets, utilisez les curseurs du panneau.
- Copiez le CSS et appliquez-le à n'importe quelle image, vidéo ou élément. Utilisez Utiliser mon image pour prévisualiser avec votre propre visuel.
clip-path en bref
clip-path masque tout ce qui se trouve en dehors d'une forme. L'élément conserve sa taille et sa mise en page ; seule la zone visible change. C'est idéal pour les images de héros, les avatars, les formes de sections et les effets au survol (les valeurs clip-path comportant le même nombre de points peuvent être animées avec transition).
| Fonction | Exemple |
|---|---|
polygon() | polygon(50% 0%, 100% 100%, 0% 100%) — un triangle ; nombre de points libre |
circle() | circle(40% at 50% 50%) |
ellipse() | ellipse(45% 35% at 50% 50%) |
inset() | inset(10% 5% round 24px) — un rectangle arrondi découpé depuis les bords |
Les pourcentages sont relatifs à la boîte de l'élément : la forme s'adapte donc à sa taille. Tous les navigateurs modernes prennent en charge les formes clip-path ; la ligne -webkit- couvre les anciennes versions de Safari. Pour estomper les bords au lieu de les découper, utilisez le générateur de masque CSS ; pour des formes organiques, le générateur de blobs SVG.
Aussi recherché comme : clip-path css générateur, clip-path polygon, formes css, créer clip path, générateur polygone css, clip-path cercle, forme image css, alternative clippy.
Outils complémentaires : Générateur clip-path CSS
- 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.
- 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.
- 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.
Questions fréquentes
Comment créer une forme polygonale en CSS ?
Choisissez une forme de départ ici, déplacez les points où vous le souhaitez, puis copiez la ligne clip-path: polygon(…). Chaque point est une paire x% y% relative à l'élément.
Comment ajouter des points à un polygone clip-path ?
Sélectionnez un point et cliquez sur + Ajouter un point : un nouveau point apparaît à mi-chemin du suivant, prêt à être déplacé. Un double-clic sur l'image ajoute un point sur le bord le plus proche ; Supprimer le point efface le point sélectionné.
Peut-on animer clip-path ?
Oui. Vous pouvez utiliser transition ou animate entre deux valeurs clip-path du même type comportant le même nombre de points, par exemple deux formes polygon() à 6 points chacune.
clip-path fonctionne-t-il dans tous les navigateurs ?
Les formes de base (polygon, circle, ellipse, inset) fonctionnent dans tous les navigateurs modernes. Ajoutez la ligne -webkit-clip-path générée par l'outil pour les anciennes versions de Safari.
Pourquoi mon ombre disparaît-elle avec clip-path ?
clip-path découpe aussi box-shadow. Enveloppez l'élément dans un parent et appliquez filter: drop-shadow() sur ce parent à la place.
Puis-je installer Générateur clip-path CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur clip-path 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.