Générateur CSS clip-path, gratuit

Comment utiliser

1. Choisissez un type de forme : polygone, cercle, ellipse ou inset (rectangle avec coins arrondis optionnels).
2. Faites glisser les points de contrôle : déplacez les poignées de la forme sur l'aperçu pour personnaliser précisément la zone de masque.
3. Copiez le CSS : la valeur de la propriété clip-path générée est prête à coller dans votre feuille de style.

Pourquoi utiliser le générateur CSS clip-path ?

CSS clip-path crée des formes non rectangulaires en masquant tout ce qui est en dehors d'une zone définie. On l'utilise pour des séparateurs de sections en diagonale, des recadrages d'images hexagonaux, des formes de boutons personnalisées, des effets de survol créatifs et des révélations d'images masquées. Écrire à la main les coordonnées d'un polygone clip-path implique de calculer les pourcentages de chaque sommet, fastidieux et difficile à visualiser. Ce générateur interactif vous permet de glisser des points visuellement et d'obtenir les valeurs CSS exactes instantanément.

Fonctionnalités

• Éditeur de polygone : ajoutez, déplacez et supprimez des sommets pour créer n'importe quelle forme.
• Préréglages intégrés : diagonale, chevron, hexagone, étoile, triangle et autres formes courantes.
• Modes cercle et ellipse : contrôles visuels pour un masque circulaire ou elliptique.
• Mode inset : créez des masques rectangulaires avec un border-radius individuel pour chaque coin.
• Aperçu de la zone masquée : voyez la partie masquée en surbrillance pour savoir exactement ce qui sera caché.

Questions fréquentes

clip-path affecte-t-il les zones cliquables ?

Oui. Par défaut, les événements de pointeur ne sont enregistrés qu'à l'intérieur de la zone de masque, la zone masquée est à la fois invisible et non cliquable. Pour rendre l'élément entièrement cliquable tout en le masquant visuellement, utilisez pointer-events: all sur l'élément ou superposez une couche transparente.

Puis-je animer clip-path ?

Oui, clip-path peut faire l'objet de transitions et d'animations CSS. Animez entre deux polygones ayant le même nombre de points pour un effet de morphing fluide. Des formes avec des nombres de points différents s'animeront par saut plutôt que par interpolation.

clip-path est-il pris en charge par tous les navigateurs ?

clip-path est pris en charge par tous les navigateurs modernes. Pour des formes SVG via la syntaxe url(#id), le support est encore plus large. Les valeurs basiques polygon, circle, ellipse et inset fonctionnent universellement sur Chrome, Firefox, Safari et Edge.

Ce que CSS clip-path fait vraiment

La propriété CSS clip-path masque un élément à une forme choisie : tout ce qui est à l’intérieur de la forme est visible, tout ce qui est à l’extérieur devient transparent. La boîte de mise en page de l’élément est inchangée (elle occupe toujours le même rectangle pour les besoins de l’effondrement de marge, du flux et du positionnement des frères et sœurs), mais seuls les pixels à l’intérieur de la région de découpe sont dessinés. Cela rend clip-path différent du recadrage (qui change l’image en permanence) et différent du positionnement (qui déplace les choses) : clip-path est un masque appliqué au moment de l’affichage, juste avant que les pixels n’atteignent l’écran.

Il y a quatre fonctions de forme de base : polygon() (une liste de sommets en coordonnées pourcentage ou pixel), circle() (rayon plus un centre), ellipse() (deux rayons plus un centre) et inset() (un rectangle mesuré depuis chaque bord, optionnellement avec des coins arrondis). Pour les formes trop complexes pour ces quatre (courbes irrégulières, étoiles avec des indentations concaves, contours calligraphiques), clip-path accepte aussi un chemin SVG via path() ou une référence à un élément <clipPath> SVG via url(#id). Le navigateur dessine l’élément, puis le compose à travers le masque alpha défini par votre forme.

clip-path compte pour le design web moderne parce qu’il permet des formes qui auraient nécessité des éditeurs d’images il y a une décennie. Un séparateur de section diagonal, un recadrage d’image hexagonal, une bannière en chevron, une photo en forme d’étoile : tout est maintenant possible en CSS pur, mis à l’échelle à n’importe quelle taille, animable au survol et accessible parce que l’élément sous-jacent est toujours du HTML, pas une image rasterisée. Le compromis est la verbosité : écrire polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) à la main pour un simple losange est faisable, mais une étoile à 12 sommets ou un détourage de logo personnalisé est impraticable sans un éditeur visuel. C’est là que ce générateur s’insère.

Comment cet outil fonctionne en coulisses

L’aperçu est un div avec votre clip-path choisi appliqué en CSS inline, mis à jour à chaque glissement d’une poignée de contrôle. Les poignées sont des cercles positionnés en absolu superposés sur l’aperçu aux coordonnées en pourcentage de chaque sommet. Quand vous faites glisser une poignée, JavaScript capture l’événement mousemove (ou touchmove), convertit la position en pixels en un pourcentage de la zone d’aperçu, met à jour ce sommet dans le polygone en mémoire et ré-applique la chaîne clip-path. Le rendu en temps réel signifie que vous voyez la forme changer pendant que vous glissez, pas après.

Le CSS généré est construit en joignant les sommets dans une chaîne de polygone : polygon(x1% y1%, x2% y2%, ...) pour le mode polygone, ou circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius) pour les types de forme plus simples. Les valeurs en pourcentage plutôt qu’en pixels sont utilisées parce que les pourcentages s’adaptent automatiquement à l’élément : un polygone qui semble correct à 300x200 semble aussi correct à 600x400 sans changement au CSS. La boîte de code se met à jour à chaque interaction, et le bouton Copier le CSS écrit la valeur actuelle dans votre presse-papiers.

Rien ne quitte votre navigateur. L’aperçu, les calculs de forme, la génération CSS et la copie au presse-papiers sont tous du JavaScript côté client. Aucune requête réseau n’est faite ; aucune image n’est téléversée ; aucune analyse de vos choix de forme. L’outil n’a aucun backend au-delà du HTML statique et du JavaScript servis une fois au premier chargement. Ouvrez l’onglet réseau du navigateur pendant l’utilisation et vous verrez zéro requête après le chargement initial de la page. Le CSS que vous générez est à vous pour coller dans n’importe quelle feuille de style.

Brève histoire du découpage CSS

• SVG clipPath, 2001.La spécification SVG 1.0 (Recommandation W3C, septembre 2001) introduit <clipPath>, permettant à tout élément SVG d’être masqué par une autre forme. Le découpage SVG gère les chemins complexes mais nécessite un balisage SVG inline, limitant la réutilisation dans les pages HTML simples sans maîtrise de SVG.
• Propriété CSS clip, 1998 à 2010s.La propriété CSS clip originale (spécification CSS 2, 1998) ne supportait que rect(), un découpage rectangulaire à quatre valeurs sur les éléments positionnés en absolu. Limitée et dépréciée d’ici 2014, mais encore vue dans les modèles CSS « lecteur d’écran uniquement » hérités où le contenu visible est découpé à 1x1 pixel pour l’accessibilité.
• Module CSS Masking Niveau 1, 2014.Le W3C publie la spécification CSS Masking Module Niveau 1 (avril 2014), introduisant la propriété clip-path moderne avec le support de polygon, circle, ellipse, inset et SVG-path. Chrome 24 (janvier 2013) et Safari 7 (juin 2013) livrent les formes de base avant la spécification formelle ; Firefox suit dans la version 54 (juin 2017).
• Vague de design web brutaliste Adobe, 2015 à 2017.Les sections héros avec des découpes diagonales, les séparateurs de bannière inclinés et les grilles de photos d’équipe hexagonales deviennent une tendance de design, portée par des outils comme Webflow et des articles de design sur CSS-Tricks. Les portfolios de style Awwwards mettent en évidence les astuces clip-path, et la propriété passe de « curiosité CSS obscure » à « technique moderne attendue ».
• Internet Explorer meurt, 2022.Microsoft retire Internet Explorer le 15 juin 2022, mettant fin à la dernière barrière de navigateur significative aux fonctionnalités CSS modernes, y compris clip-path. D’ici 2023, « clip-path est-il supporté ? » cesse d’être une préoccupation sérieuse multi-navigateurs, et la propriété devient un outil par défaut dans le design CSS-only.
• Fonction CSS shape(), 2024 et au-delà.Le CSS Shapes Module continue d’évoluer avec des propositions comme shape() (une alternative plus flexible à path() utilisant une syntaxe compatible CSS au lieu de chaînes de chemin SVG), permettant des formes complexes sans le changement de contexte SVG. Le support des navigateurs se déploie en 2025 et 2026.

Flux du monde réel

• Découpes diagonales de section héros.Le motif « héros trapézoïdal » où le bord inférieur d’une section héros est incliné en diagonale plutôt qu’horizontal est l’une des utilisations clip-path les plus populaires. Un simple polygon(0 0, 100% 0, 100% 90%, 0 100%) crée une pente de 10% bas-gauche vers haut-droite. Ajoutez une deuxième section en dessous avec la pente inverse et vous obtenez une mise en page « papier déchiré » ou « angles empilés » qui semble délibérée sans nécessiter d’images.
• Grilles d’avatars hexagonaux.Les pages d’équipe, les listes de contributeurs ou les rosters sportifs utilisent souvent des recadrages photo hexagonaux pour une alternative plus dynamique aux avatars ronds. Un polygone à six sommets clip-path crée l’hexagone ; CSS grid arrange la disposition en nid d’abeille décalée. Comparé au découpage dans Photoshop, les photos restent originales et non modifiées : changez l’orientation hex ou passez aux cercles avec une seule modification CSS.
• Effets de révélation d’image au survol.Animer clip-path au survol crée des « révélations d’image » où une portion découpée s’étend en douceur. Motifs courants : une image commence comme un minuscule cercle et s’étend à la couverture complète au survol, ou un polygone commence comme une fine barre oblique et grandit en un rectangle complet. La transition CSS sur clip-path interpole en douceur entre deux polygones avec le même nombre de sommets, produisant des animations à 60fps sans JavaScript.
• Formes de boutons personnalisées.L’interface utilisateur des jeux, les interfaces futuristes et les portfolios créatifs utilisent souvent des boutons non rectangulaires (formes de flèche, hexagones, parallélogrammes). clip-path masque un élément bouton standard à la forme choisie, gardant le bouton sous-jacent accessible (toujours focusable, toujours cliquable au clavier, toujours annoncé par les lecteurs d’écran) tout en présentant un visuel personnalisé.
• Séparateurs de section décoratifs.Les séparateurs en vague, les séparateurs en chevron et les séparateurs « page déchirée » entre les sections de page nécessitaient des images SVG d’arrière-plan ou des images par section. clip-path les produit en CSS pur en utilisant soit un inset avec coins arrondis soit un polygone suivant la vague souhaitée. Les séparateurs s’adaptent et répondent aux changements de mise en page automatiquement.
• Galeries de photos créatives.Les mises en page de galerie de photos utilisant des vignettes rectangulaires uniformes semblent génériques ; découper chaque vignette à une forme de polygone légèrement différente produit une sensation de collage découpé à la main sans masquer manuellement chaque image. Un petit ensemble de 3 à 5 variantes de polygone cyclées dans la grille crée un rythme visuel tout en restant performant (la même forme est juste appliquée par transformation à différentes sources d’image).

Pièges courants et ce qu’ils signifient

• clip-path ne change pas la mise en page.Une surprise courante : découper un élément à une forme plus petite ne réduit pas l’espace qu’il prend dans le flux du document. L’élément occupe toujours sa boîte de mise en page complète ; clip-path change seulement ce qui est dessiné. Pour obtenir un élément qui prend physiquement moins de place, vous devez aussi le redimensionner. Si vous voulez que le contenu découpé soit réellement recadré, utilisez overflow: hidden sur un wrapper, ou utilisez CSS mask avec une boîte de mise en page plus petite.
• La discordance du rapport d’aspect casse les coordonnées en pourcentage.Les coordonnées de polygone exprimées en pourcentages s’adaptent uniformément avec l’élément. Une forme de losange polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) reste un losange à n’importe quelle taille, mais elle devient un rhombe plus large ou plus haut si le rapport d’aspect de l’élément change. Pour les formes qui doivent rester visuellement cohérentes à travers les rapports d’aspect, utilisez des valeurs en pixels ou des calculs min(50vw, 50vh), ou contraignez le rapport d’aspect de l’élément avec la propriété CSS aspect-ratio.
• Les régions découpées ne sont pas cliquables.Les événements de pointeur ne s’enregistrent que là où l’élément est visible après le découpage. Un bouton découpé à un triangle n’est cliquable que sur le triangle, pas sur l’espace rectangulaire invisible qu’il occupe. C’est habituellement souhaité (pas de clics accidentels sur un espace vide), mais peut être déroutant quand plusieurs boutons découpés se chevauchent ou quand un contenu interactif s’étend visuellement en dehors de la région de découpe.
• Animer beaucoup d’éléments découpés est coûteux.clip-path déclenche la composition à chaque image d’animation, ce qui peut faire chuter le taux d’images si appliqué à plusieurs éléments simultanément ou sur de grands éléments (sections héros plein écran). Pour des animations à 60fps, limitez le nombre d’éléments découpés s’animant en même temps, préférez des formes plus simples (polygones à 4 à 6 sommets plutôt qu’à 20), et envisagez d’utiliser CSS will-change: clip-path sur les éléments que vous prévoyez d’animer pour inciter le navigateur à les accélérer par GPU.
• Les polygones ont besoin de nombres de sommets correspondants pour se transformer.Animer clip-path entre deux formes de polygone fonctionne seulement si les deux polygones ont le même nombre de sommets. Passer d’un triangle (3 points) à un carré (4 points) saute instantanément plutôt que de se transformer en douceur. Pour une transformation en douceur entre des formes de complexité visuelle différente, définissez les deux polygones avec le même nombre de points, en plaçant les extras à des coordonnées qui « cachent » sur l’une des formes (par exemple, deux points superposés).
• Safari nécessite le préfixe -webkit- pour la syntaxe de chemin SVG.Les formes de base (polygon, circle, ellipse, inset) fonctionnent sans préfixe à travers tous les navigateurs modernes. Mais Safari nécessite toujours le préfixe -webkit-clip-path lors de l’utilisation de la fonction path() ou de la référence à des clipPaths SVG url(#id). Pour la compatibilité multi-navigateurs, déclarez à la fois -webkit-clip-path et clip-path avec la même valeur pour le découpage basé sur SVG-path. Les préfixeurs automatiques (Autoprefixer, PostCSS) gèrent cela automatiquement dans les configurations de build modernes.

Confidentialité : tout s’exécute dans votre navigateur

Les outils générateurs CSS tombent traditionnellement dans deux camps : les pages HTML simples avec JavaScript côté client (privées, rapides, sans compte) et les éditeurs complets avec projets sauvegardés dans le cloud (collaboratifs, mais chaque modification de forme est enregistrée sur le serveur de quelqu’un d’autre). Cet outil est fermement dans le premier camp. Les coordonnées de polygone que vous faites glisser, les couleurs que vous choisissez, le CSS que vous copiez : tout reste dans votre session de navigateur, jamais envoyé nulle part. Rafraîchissez la page et l’état est parti sauf si vous avez copié le CSS d’abord.

L’implication de confidentialité compte surtout pour le travail propriétaire. Une agence de design prototypant une forme de bouton personnalisée pour une refonte de marque confidentielle, un développeur indépendant travaillant sur une UI de jeu non annoncée, une équipe d’entreprise concevant des mises en page pour un produit encore sous NDA : tout contexte où la forme elle-même ou son historique d’itération pourrait fuir des informations sur le travail en cours. Avec cet outil, aucun de ces risques n’existe parce que rien n’est capturé. Ouvrez l’onglet Réseau du navigateur en glissant les poignées et vous verrez zéro requête sortante.

Quand un autre outil est le bon choix

• Éditeurs SVG pour chemins complexes.Pour les courbes irrégulières, les formes calligraphiques ou tout ce qui dépasse les fonctions de forme de base, dessiner la forme dans Figma, Inkscape ou Adobe Illustrator et l’exporter en chemin SVG est plus pratique que de coder à la main les coordonnées clip-path. Puis utilisez clip-path: path('M...') ou référencez le SVG par ID. Les éditeurs SVG fournissent des poignées bezier et de la précision ; les générateurs clip-path ne le font pas.
• CSS mask pour le mélange alpha et les dégradés.clip-path produit un alpha binaire (entièrement visible ou entièrement découpé). Pour les formes à bords doux (fondus en dégradé, courbes anti-aliasées, transparence partielle), CSS mask ou mask-image gère les dégradés alpha complets. mask supporte une image masque (n’importe quel PNG, SVG ou dégradé) où les pixels noirs cachent et les pixels blancs montrent, avec les gris donnant une opacité partielle. clip-path ne peut pas le faire.
• Traitement d’image pour les recadrages permanents.Si vous voulez que le fichier image final lui-même soit recadré à une forme (taille de fichier plus petite, pas de surcharge clip-path, pas de risque de fallback non découpé), faites le recadrage dans un éditeur d’images ou notre outil Image Compressor. clip-path est pour le masquage au moment de l’affichage sur les éléments HTML ; si la cible est un actif d’image statique, recadrez le fichier directement.
• Figma ou Sketch pour les maquettes de design.Pendant le prototypage d’une mise en page, les outils vectoriels de Figma gèrent l’exploration de formes complexes plus rapidement que de faire glisser des poignées clip-path. Utilisez l’outil de design pour trouver la forme que vous voulez, puis traduisez la forme finale en CSS clip-path pour la production. L’outil de design gère aussi les itérations, l’historique d’annulation et les commentaires d’équipe mieux qu’un générateur CSS en temps réel.

Autres questions fréquentes

Puis-je utiliser des pourcentages ou des pixels pour les coordonnées de sommet ?

Les deux fonctionnent. Les pourcentages s’adaptent avec la boîte de l’élément, donc un polygone défini en pourcentages garde sa forme proportionnelle quand l’élément se redimensionne. Les pixels sont absolus, donc un polygone avec des coordonnées en pixels garde la même taille quel que soit l’élément. Utilisez des pourcentages pour les formes qui doivent se redimensionner avec la mise en page (la plupart des cas) et des pixels pour les formes qui nécessitent des positions de pixel exactes (par exemple, l’alignement à un élément de design spécifique). Vous pouvez aussi mixer : polygon(50% 10px, 100% 50%, ...) est valide.

clip-path affectera-t-il le SEO ou les lecteurs d’écran ?

Non. clip-path est une propriété purement visuelle. Le HTML sous-jacent est entièrement accessible : le texte à l’intérieur d’un élément découpé est toujours indexé par les moteurs de recherche, toujours annoncé par les lecteurs d’écran, toujours sélectionnable par navigation au clavier. Utilisez clip-path pour le style visuel ; ne l’utilisez pas comme moyen de cacher le contenu sémantiquement (cela nécessite display: none ou des attributs aria-hidden). Le contenu visuellement découpé reste présent dans l’arborescence d’accessibilité.

Comment rendre un clip-path responsive ?

Utilisez des pourcentages au lieu de pixels, et vérifiez le résultat à différents points de rupture. Pour les formes qui nécessitent des proportions différentes sur mobile versus bureau, utilisez les media queries CSS pour échanger la valeur clip-path : déclarez un clip-path différent à l’intérieur de @media (max-width: 768px) pour la forme mobile. Pour des besoins responsifs complexes (par exemple, un polygone qui devient un cercle sur mobile), envisagez d’utiliser JavaScript pour recalculer le clip-path en fonction de la taille de la fenêtre, bien que les approches CSS pures gèrent la plupart des cas.

clip-path peut-il être appliqué aux vidéos et aux iframes ?

Oui. clip-path fonctionne sur tout élément HTML, y compris <video> et <iframe>. Le masque s’applique au niveau de l’élément, donc une vidéo découpée à un hexagone se joue à l’intérieur de cet hexagone. Les contrôles vidéo (lorsqu’ils sont affichés) sont aussi découpés, ce qui peut cacher par inadvertance les boutons play/pause ; enveloppez la vidéo dans un élément conteneur si vous avez besoin que les contrôles soient visibles en dehors de la zone découpée.

Quel est le nombre maximum de sommets de polygone ?

Il n’y a pas de limite formelle spécifiée par la norme CSS. En pratique, les navigateurs gèrent des polygones avec des centaines de sommets sans erreurs de rendu, mais les performances se dégradent avec le nombre de sommets, surtout pour les clip-paths animés. Visez 3 à 12 sommets pour la plupart des formes décoratives ; si vous avez besoin de plus de complexité, passez à un path() SVG pour une création plus propre et des caractéristiques de performance similaires. Au-delà de 50 sommets, clip-path devient plus difficile à maintenir à la main et un flux de travail avec éditeur SVG a plus de sens.

Puis-je découper du texte au lieu de simplement des images et des boîtes ?

Oui. clip-path fonctionne aussi sur les éléments de texte, les masquant comme n’importe quel autre élément. L’effet visuel est « du texte qui apparaît à travers une forme ». Pour des effets de forme de texte plus sophistiqués (par exemple, en utilisant un contour de texte comme masque de découpe pour une image), combinez clip-path avec background-clip: text, qui utilise la forme du texte elle-même comme région de découpe pour l’arrière-plan de l’élément. Motif courant : grand texte avec un arrière-plan en dégradé visible seulement à l’intérieur des formes de texte.