CSS Clip-Path Generator
Generate CSS clip-path shapes visually.
.element {
clip-path: circle(40% at 50% 50%);
}Informazioni su questo strumento
Il Generatore CSS Clip-Path crea valori clip-path per quattro tipi di forma: circle(), ellipse(), inset() e polygon().
Permette layout creativi, maschere immagine e forme di sezione hero senza file SVG. Tutti i parametri aggiornano l'anteprima in tempo reale.
Come usare
- Seleziona un tipo di forma: circle, ellipse, inset o polygon.
- Regola i cursori per configurare i parametri della forma.
- Per i poligoni, scegli una forma predefinita dalla lista.
- L'anteprima dal vivo si aggiorna durante le regolazioni.
- Fai clic su Copia per copiare il CSS negli appunti.
Casi d'uso
Le sezioni hero usano clip-path diagonali o curvi come divisori visivi. Le foto profilo usano circle(). Gli effetti hover usano animazioni clip-path.
Domande frequenti
- Il clip-path influisce sull'area cliccabile? — Sì. Le regioni ritagliate non sono cliccabili.
- Posso animare clip-path? — Sì. Può essere animato tra due forme poligonali con lo stesso numero di punti.
- Il clip-path è supportato da tutti i browser? — Sì, con supporto completo in tutti i browser moderni.