CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

Type de forme

Rayon: 40%

Centre X: 50%

Centre Y: 50%

Aperçu en direct

CSS généré

.element {
  clip-path: circle(40% at 50% 50%);
}

À propos de cet outil

Le Générateur CSS Clip-Path crée des valeurs clip-path pour quatre types de formes : circle(), ellipse(), inset() et polygon().

Permet des mises en page créatives, des masques d'image et des formes de section hero sans fichiers SVG. Tous les paramètres mettent à jour l'aperçu en temps réel.

Comment utiliser

Sélectionnez un type de forme : circle, ellipse, inset ou polygon.
Réglez les curseurs pour configurer les paramètres de la forme.
Pour les polygones, choisissez une forme prédéfinie dans la liste.
L'aperçu en direct se met à jour pendant l'ajustement.
Cliquez sur Copier pour copier le CSS dans le presse-papiers.

Cas d'utilisation

Les sections hero utilisent des clip-path diagonaux ou courbés comme séparateurs visuels. Les photos de profil utilisent circle(). Les effets hover utilisent des animations clip-path.

Questions fréquentes

Le clip-path affecte-t-il la zone cliquable ? — Oui. Les zones découpées ne sont pas cliquables.
Puis-je animer clip-path ? — Oui. Il peut être transitionné et animé entre deux formes de polygone avec le même nombre de points.
Clip-path est-il supporté par tous les navigateurs ? — Oui, avec un support complet dans tous les navigateurs modernes.