Générateur de Clip Path CSS
Générateur en ligne gratuit de clip-path CSS. Créez des formes polygon, circle, ellipse et inset avec des points déplaçables, aperçu en direct et copie du code CSS en un clic.
Qu'est-ce que clip-path en CSS ?
clip-path est une propriété CSS qui rogne un élément selon une forme de base ou un tracé. Tout ce qui est en dehors de la forme est masqué : vous pouvez ainsi transformer une image ou un bloc rectangulaire en triangle, cercle, hexagone, bannière inclinée ou tout polygone personnalisé sans retoucher l'image.
Quels navigateurs prennent en charge clip-path ?
Tous les navigateurs modernes prennent en charge les fonctions de forme de base utilisées par ce générateur : polygon(), circle(), ellipse() et inset(). Cela inclut Chrome, Edge, Firefox, Safari et Opera. Le préfixe -webkit-clip-path n'est utile que pour de très anciennes versions de Safari mobile.
Comment fonctionne le mode polygon ?
En mode polygon, l'aperçu affiche chaque sommet sous forme de point déplaçable. Faites glisser un point pour le déplacer, double-cliquez sur un espace vide pour en insérer un nouveau, cliquez sur un point pour le sélectionner puis appuyez sur le bouton supprimer pour le retirer. La valeur CSS se met à jour en temps réel avec des coordonnées en pourcentage.
Que signifient les pourcentages dans polygon() ?
Chaque sommet s'écrit comme une paire X Y en pourcentage, mesurée depuis le coin supérieur gauche de l'élément. Les valeurs étant relatives à la taille de l'élément, la forme s'adapte à celui-ci et reste responsive quelle que soit la largeur d'écran.
Quelle est la différence entre circle, ellipse et inset ?
circle(rayon at x y) rogne un cercle avec un seul rayon, ellipse(rx ry at x y) permet des rayons horizontaux et verticaux différents, et inset(haut droite bas gauche) rogne un rectangle rétréci depuis chaque bord. Ce générateur fournit curseurs et champs numériques pour tous les paramètres.
clip-path affecte-t-il la mise en page ou les clics ?
clip-path est purement visuel. L'élément conserve sa boîte d'origine dans la mise en page, rien autour ne bouge. En revanche, les événements de pointeur comme les clics ne s'enregistrent que dans la zone visible rognaée, ce qui est pratique pour créer des boutons de forme personnalisée.
Peut-on animer un clip-path ?
Oui. Les navigateurs peuvent faire une transition fluide entre deux valeurs de clip-path lorsque la fonction de forme et le nombre de points correspondent, par exemple d'un inset grand à un inset petit, ou entre deux polygones de même nombre de sommets. Animez-le avec la propriété CSS transition.
Mon image ou mes données sont-elles envoyées quelque part ?
Non. L'image d'aperçu est un dégradé dessiné localement sur un canvas et tous les calculs se font dans votre navigateur. Rien de ce que vous créez n'est envoyé à un serveur ; l'outil fonctionne donc aussi hors ligne une fois chargé.
Quels sont les usages courants de clip-path ?
Parmi les usages populaires : sections hero en diagonale, masques d'avatar hexagonaux ou circulaires, pointes de bulles triangulaires, collages photo créatifs, coins de cartes biseautés et boutons de forme personnalisée, sans aucun logiciel de retouche d'image.
Comment utiliser Générateur de Clip Path CSS
Donnez forme à n'importe quel élément avec CSS clip-path au lieu de retoucher des images. Choisissez une fonction de forme, faites glisser les poignées et copiez un CSS prêt pour la production. Tout tourne localement dans votre navigateur.
- Choisissez un mode : Polygone, Cercle, Ellipse ou Inset.
- En mode Polygone, faites glisser les points des sommets, double-cliquez dans l'espace vide pour ajouter un point et sélectionnez-en un avant de le supprimer.
- Dans les modes Cercle, Ellipse et Inset, ajustez chaque valeur avec les curseurs ou tapez un pourcentage exact.
- Regardez l'aperçu en direct se mettre à jour sur une image d'échantillon dégradée générée localement.
- Copiez la règle clip-path sur une seule ligne et collez-la dans votre feuille de style.
Conservez le même nombre de points de polygone entre deux états et vous pourrez animer la forme en douceur avec une transition CSS.
Outils associés
- Générateur de Box Shadow CSS Générateur en ligne gratuit de box-shadow CSS. Créez visuellement de belles ombres avec décalage, flou, étalement, couleur et inset ajustables. Aperçu en direct et copie instantanée.
- Générateur de Dégradés CSS Créez de superbes dégradés CSS visuellement. Générez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur, angles et positions. Copiez instantanément du code CSS prêt pour la production.
- Générateur de Border Radius Générateur de border radius créatif gratuit en ligne. Déplacez 8 poignées ou choisissez un blob pour créer des formes CSS organiques et copier le code aussitôt.
- Convertisseur de Couleur Convertisseur de couleur en ligne gratuit. Convertissez les formats HEX, RGB, HSL, HSV instantanément avec sélecteur visuel. 100% privé, fonctionne dans votre navigateur.
- Générateur d'Easing CSS Générateur en ligne gratuit d'easing CSS. Déplacez les points de contrôle du cubic-bezier sur une courbe interactive, choisissez parmi 18 préréglages, regardez une animation de balle en boucle et copiez la fonction de temporisation instantanément.
- Générateur de Text Shadow CSS Générateur en ligne gratuit de text-shadow CSS. Empilez plusieurs couches d'ombre avec décalage, flou, couleur et opacité, essayez des préréglages Néon, 3D ou Rétro et copiez le CSS instantanément.
- Beautificateur CSS Formatez et embellissez le code CSS instantanément. Convertissez le CSS minifié en code lisible et bien indenté avec des options personnalisables.
- Minificateur CSS Minificateur CSS en ligne gratuit. Compressez et optimisez instantanément le code CSS en supprimant espaces, commentaires et caractères inutiles. Réduisez la taille pour de meilleures performances web.