Generatore di percorsi a clip CSS

Come usare

1. Scegli un tipo di forma: poligono, cerchio, ellisse o inset (rettangolo con angoli arrotondati opzionali).
2. Trascina i punti di controllo: sposta le maniglie della forma sull'anteprima per personalizzare con precisione la zona di maschera.
3. Copia il CSS: il valore della proprietà clip-path generato è pronto da incollare nel tuo foglio di stile.

Perché usare il generatore CSS clip-path?

CSS clip-path crea forme non rettangolari mascherando tutto ciò che è al di fuori di una zona definita. Si usa per separatori di sezioni in diagonale, ritagli di immagini esagonali, forme di pulsanti personalizzate, effetti di hover creativi e rivelazioni di immagini mascherate. Scrivere a mano le coordinate di un poligono clip-path implica calcolare le percentuali di ogni vertice, noioso e difficile da visualizzare. Questo generatore interattivo ti permette di trascinare punti visivamente e di ottenere i valori CSS esatti all'istante.

Funzionalità

• Editor di poligono: aggiungi, sposta ed elimina vertici per creare qualsiasi forma.
• Preimpostazioni integrate: diagonale, chevron, esagono, stella, triangolo e altre forme comuni.
• Modalità cerchio ed ellisse: controlli visivi per una maschera circolare o ellittica.
• Modalità inset: crea maschere rettangolari con un border-radius individuale per ogni angolo.
• Anteprima della zona mascherata: vedi la parte mascherata in evidenza per sapere esattamente cosa sarà nascosto.

Domande frequenti

clip-path influisce sulle zone cliccabili?

Sì. Per impostazione predefinita, gli eventi del puntatore vengono registrati solo all'interno della zona di maschera, la zona mascherata è sia invisibile che non cliccabile. Per rendere l'elemento interamente cliccabile pur mascherandolo visivamente, usa pointer-events: all sull'elemento o sovrapponi uno strato trasparente.

Posso animare clip-path?

Sì, clip-path può essere oggetto di transizioni e animazioni CSS. Anima tra due poligoni con lo stesso numero di punti per un effetto di morphing fluido. Forme con numeri di punti diversi si animeranno per salto invece che per interpolazione.

clip-path è supportato da tutti i browser?

clip-path è supportato da tutti i browser moderni. Per forme SVG tramite la sintassi url(#id), il supporto è ancora più ampio. I valori di base polygon, circle, ellipse e inset funzionano universalmente su Chrome, Firefox, Safari ed Edge.

Cosa fa davvero CSS clip-path

La proprietà CSS clip-path maschera un elemento a una forma scelta: tutto ciò che è all'interno della forma è visibile, tutto ciò che è all'esterno diventa trasparente. La layout box dell'elemento non è cambiata (occupa ancora lo stesso rettangolo per quanto riguarda il collapse dei margini, il flow e il posizionamento dei fratelli), ma vengono disegnati solo i pixel all'interno della regione di clip. Questo rende clip-path diverso dal ritaglio (che cambia permanentemente l'immagine) e diverso dal posizionamento (che sposta le cose): clip-path è una maschera al momento del display applicata proprio prima che i pixel arrivino sullo schermo.

Ci sono quattro funzioni di forma di base: polygon() (una lista di vertici come coordinate in percentuale o pixel), circle() (raggio più un centro), ellipse() (due raggi più un centro) e inset() (un rettangolo misurato da ogni bordo, opzionalmente con angoli arrotondati). Per forme troppo complesse per queste quattro (curve irregolari, stelle con rientranze concave, contorni calligrafici), clip-path accetta anche un percorso SVG tramite path() o un riferimento a un elemento SVG tramite url(#id). Il browser disegna l'elemento, poi lo compone attraverso la maschera alpha definita dalla tua forma.

clip-path conta per il design web moderno perché abilita forme che avrebbero richiesto editor di immagini un decennio fa. Un divisore di sezione diagonale, una griglia di avatar esagonali, un banner a chevron, una foto a forma di stella: tutti ora possibili in puro CSS, scalabili a qualsiasi dimensione, animabili al passaggio del mouse e accessibili perché l'elemento sottostante è ancora HTML, non un'immagine rasterizzata. Il compromesso è la verbosità: scrivere polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) a mano per un semplice diamante è fattibile, ma una stella a 12 vertici o un ritaglio di logo personalizzato è impraticabile senza un editor visivo. Lì entra in gioco questo generatore.

Come funziona questo strumento sotto il cofano

L'anteprima è un div con il tuo clip-path scelto applicato come CSS inline, aggiornato a ogni trascinamento di una maniglia di controllo. Le maniglie sono cerchi posizionati in modo assoluto sovrapposti all'anteprima alle coordinate percentuali di ogni vertice. Quando trascini una maniglia, JavaScript cattura l'evento mousemove (o touchmove), converte la posizione del pixel in una percentuale dell'area di anteprima, aggiorna quel vertice nel poligono in memoria e riapplica la stringa clip-path. Il rendering in tempo reale significa che vedi la forma cambiare mentre trascini, non dopo.

Il CSS generato è costruito unendo i vertici in una stringa di poligono: polygon(x1% y1%, x2% y2%, ...) per la modalità poligono, o circle(r% at cx% cy%), ellipse(rx% ry% at cx% cy%), inset(top right bottom left round radius) per i tipi di forma più semplici. I valori percentuali invece dei valori pixel vengono usati perché le percentuali scalano automaticamente con l'elemento: un poligono che appare corretto a 300x200 appare anche corretto a 600x400 senza alcun cambio al CSS. Il riquadro di codice si aggiorna a ogni interazione e il pulsante Copia CSS scrive il valore corrente negli appunti.

Nulla lascia il tuo browser. L'anteprima, i calcoli della forma, la generazione CSS e la copia degli appunti sono tutti JavaScript lato client. Nessuna richiesta di rete viene fatta; nessuna immagine viene caricata; nessuna analytics sulle tue scelte di forma. Lo strumento non ha alcun backend oltre l'HTML statico e il JavaScript serviti una volta al primo caricamento. Apri la scheda di rete del browser durante l'uso e vedrai zero richieste dopo il caricamento iniziale della pagina. Il CSS che generi è tuo da incollare in qualsiasi foglio di stile.

Breve storia del ritaglio CSS

• SVG clipPath, 2001.La specifica SVG 1.0 (Raccomandazione W3C, settembre 2001) introduce , permettendo a qualsiasi elemento SVG di essere mascherato da un'altra forma. Il ritaglio SVG gestisce percorsi complessi ma richiede markup SVG inline, limitando il riutilizzo in pagine HTML semplici senza fluidità SVG.
• Proprietà CSS clip, dal 1998 al 2010.La proprietà CSS originale clip (specifica CSS 2, 1998) supportava solo rect(), un clip rettangolare a quattro valori su elementi posizionati in modo assoluto. Limitata e deprecata entro il 2014, ma ancora vista nei modelli CSS legacy "solo per lettori di schermo" dove il contenuto visibile è ritagliato a 1x1 pixel per accessibilità.
• CSS Masking Module Level 1, 2014.Il W3C pubblica la specifica CSS Masking Module Level 1 (aprile 2014), introducendo la moderna proprietà clip-path con supporto per poligono, cerchio, ellisse, inset e SVG path. Chrome 24 (gennaio 2013) e Safari 7 (giugno 2013) distribuiscono le forme di base prima della specifica formale; Firefox segue nella versione 54 (giugno 2017).
• Ondata di web design brutalista Adobe, dal 2015 al 2017.Sezioni hero con tagli diagonali, divisori a banner angolati e griglie di foto del team esagonali diventano una tendenza di design, guidate da strumenti come Webflow e articoli di design su CSS-Tricks. I portfolio in stile Awwwards mostrano in evidenza i trucchi clip-path, e la proprietà passa da "oscura curiosità CSS" a "tecnica moderna attesa."
• Internet Explorer muore, 2022.Microsoft ritira Internet Explorer il 15 giugno 2022, ponendo fine all'ultima barriera browser significativa per le moderne funzionalità CSS incluso clip-path. Entro il 2023, "supporta clip-path?" smette di essere una seria preoccupazione cross browser, e la proprietà diventa uno strumento predefinito nel design solo CSS.
• Funzione CSS shape(), 2024 e oltre.Il CSS Shapes Module continua a evolvere con proposte come shape() (un'alternativa più flessibile a path() usando sintassi CSS friendly invece di stringhe di percorso SVG), abilitando forme complesse senza il cambio di contesto SVG. Il supporto del browser sta arrivando durante il 2025 e il 2026.

Flussi nel mondo reale

• Tagli diagonali nelle sezioni hero.Il pattern "hero trapezoidale" dove il bordo inferiore di una sezione hero è angolato diagonalmente invece che orizzontale è uno degli usi più popolari di clip-path. Un semplice polygon(0 0, 100% 0, 100% 90%, 0 100%) crea un'inclinazione del 10% da basso a sinistra a alto a destra. Aggiungi una seconda sezione sotto con l'inclinazione inversa e ottieni un layout "carta strappata" o "angoli impilati" che sembra deliberato senza bisogno di immagini.
• Griglie di avatar esagonali.Le pagine del team, gli elenchi dei contributori o i roster sportivi spesso usano ritagli di foto esagonali per un'alternativa più dinamica agli avatar rotondi. Un poligono clip-path a sei vertici crea l'esagono; CSS grid sistema il layout a nido d'ape sfalsato. Rispetto al ritaglio in Photoshop, le foto rimangono originali e non modificate: cambia l'orientamento dell'esagono o passa ai cerchi con una singola modifica CSS.
• Effetti di rivelazione di immagini al passaggio del mouse.Animare clip-path al passaggio del mouse crea "rivelazioni di immagini" dove una porzione ritagliata si espande senza problemi. Schemi comuni: un'immagine inizia come un piccolo cerchio e si espande fino a copertura completa al passaggio del mouse, o un poligono inizia come una sottile barra e cresce in un rettangolo completo. La transizione CSS su clip-path interpola tra due poligoni con lo stesso numero di vertici senza problemi, producendo animazioni a 60fps senza JavaScript.
• Forme di pulsanti personalizzate.L'UI dei giochi, le interfacce futuristiche e i portfolio creativi spesso usano pulsanti non rettangolari (forme di freccia, esagoni, parallelogrammi). clip-path maschera un elemento pulsante standard alla forma scelta, mantenendo il pulsante sottostante accessibile (ancora focalizzabile, ancora cliccabile da tastiera, ancora annunciabile dai lettori di schermo) presentando al contempo un visual personalizzato.
• Divisori di sezione decorativi.I divisori a onda, i divisori a chevron e i divisori "pagina strappata" tra le sezioni della pagina richiedevano immagini SVG di sfondo o immagini per sezione. clip-path li produce in puro CSS usando o un inset con angoli arrotondati o un poligono che segue l'onda desiderata. I divisori si scalano e rispondono automaticamente ai cambi di layout.
• Gallerie di foto creative.I layout di gallerie di foto con miniature rettangolari uniformi sembrano generici; ritagliare ogni miniatura a una forma poligonale leggermente diversa produce una sensazione di collage tagliato a mano senza mascherare manualmente ogni immagine. Un piccolo set di 3 a 5 varianti poligonali ciclate attraverso la griglia crea ritmo visivo rimanendo performante (la stessa forma viene semplicemente applicata tramite transform a diverse sorgenti immagine).

Insidie comuni e cosa significano

• clip-path non cambia il layout.Una sorpresa comune: ritagliare un elemento a una forma più piccola non riduce lo spazio che occupa nel flusso del documento. L'elemento occupa ancora la sua layout box completa; clip-path cambia solo ciò che viene disegnato. Per ottenere un elemento che occupa fisicamente meno spazio, devi anche ridimensionarlo. Se vuoi che il contenuto ritagliato venga effettivamente ritagliato, usa overflow: hidden su un wrapper, o usa CSS mask con una layout box più piccola.
• Il disallineamento del rapporto d'aspetto rompe le coordinate percentuali.Le coordinate del poligono espresse in percentuali si scalano uniformemente con l'elemento. Una forma a diamante polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) rimane un diamante a qualsiasi dimensione, ma diventa un rombo più largo o più alto se il rapporto d'aspetto dell'elemento cambia. Per le forme che devono rimanere visivamente coerenti tra rapporti d'aspetto, usa valori pixel o calcoli min(50vw, 50vh), o vincola il rapporto d'aspetto dell'elemento con la proprietà CSS aspect-ratio.
• Le regioni ritagliate non sono cliccabili.Gli eventi puntatore si registrano solo dove l'elemento è visibile dopo il ritaglio. Un pulsante ritagliato a un triangolo è cliccabile solo sul triangolo, non sullo spazio rettangolare invisibile che occupa. Questo è solitamente desiderato (nessun clic accidentale su spazio vuoto), ma può essere confuso quando più pulsanti ritagliati si sovrappongono o quando il contenuto interattivo si estende visivamente al di fuori della regione di clip.
• Animare molti elementi ritagliati è costoso.clip-path attiva il compositing su ogni frame di animazione, il che può abbassare i frame rate se applicato a molti elementi simultaneamente o a elementi grandi (sezioni hero a schermo intero). Per animazioni a 60fps, limita il numero di elementi ritagliati animati simultaneamente, preferisci forme più semplici (poligoni da 4 a 6 vertici rispetto a 20 vertici) e considera l'uso di CSS will-change: clip-path sugli elementi che pianifichi di animare per suggerire al browser di accelerarli con GPU.
• I poligoni necessitano di conteggi di vertici corrispondenti per morfizzare.Animare clip-path tra due forme di poligono funziona solo se entrambi i poligoni hanno lo stesso numero di vertici. Passare da un triangolo (3 punti) a un quadrato (4 punti) scatta istantaneamente invece di morfizzare senza problemi. Per un morphing fluido tra forme con complessità visiva diversa, definisci entrambi i poligoni con lo stesso numero di punti, posizionando gli extra alle coordinate che li "nascondono" su una delle forme (per esempio, due punti uno sopra l'altro).
• Safari richiede il prefisso -webkit- per la sintassi SVG path.Le forme di base (polygon, circle, ellipse, inset) funzionano senza prefisso su tutti i browser moderni. Ma Safari richiede ancora il prefisso -webkit-clip-path quando si usa la funzione path() o si fa riferimento a clipPath SVG url(#id). Per la compatibilità cross browser, dichiara sia -webkit-clip-path sia clip-path con lo stesso valore per il ritaglio basato su SVG path. Gli auto prefisser (Autoprefixer, PostCSS) gestiscono questo automaticamente nei setup di build moderni.

Privacy: tutto gira nel tuo browser

Gli strumenti di generazione CSS tradizionalmente cadono in due campi: semplici pagine HTML con JavaScript lato client (private, veloci, nessun account richiesto) ed editor completi con progetti salvati nel cloud (collaborativi, ma ogni modifica della forma viene registrata sul server di qualcun altro). Questo strumento è fermamente nel primo campo. Le coordinate del poligono che trascini, i colori che scegli, il CSS che copi: tutto rimane nella tua sessione del browser, mai inviato da nessuna parte. Aggiorna la pagina e lo stato è andato a meno che tu non abbia prima copiato il CSS.

L'implicazione di privacy conta soprattutto per il lavoro proprietario. Un'agenzia di design che prototipa una forma di pulsante personalizzata per un riprogetto del marchio confidenziale, uno sviluppatore indipendente che lavora su un'UI di gioco non annunciata, un team aziendale che progetta layout per un prodotto ancora sotto NDA: qualsiasi contesto in cui la forma stessa o la sua cronologia di iterazione potrebbe far trapelare informazioni sul lavoro in corso. Con questo strumento, nessuno di quel rischio esiste perché nessuno di esso viene catturato. Apri la scheda di rete del browser mentre trascini le maniglie e vedrai zero richieste in uscita.

Quando un altro strumento è la scelta giusta

• Editor SVG per percorsi complessi.Per curve irregolari, forme calligrafiche o qualsiasi cosa oltre le funzioni di forma di base, disegnare la forma in Figma, Inkscape o Adobe Illustrator ed esportarla come percorso SVG è più pratico che codificare a mano le coordinate clip-path. Poi usa clip-path: path('M...') o fai riferimento all'SVG per ID. Gli editor SVG forniscono maniglie bezier e precisione; i generatori clip-path no.
• CSS mask per blending alpha e gradienti.clip-path produce un alpha binario (completamente visibile o completamente ritagliato). Per forme con bordi morbidi (sfumate gradient, curve antialias, trasparenza parziale), CSS mask o mask-image gestisce i gradienti alpha completi. mask supporta un'immagine maschera (qualsiasi PNG, SVG o gradiente) dove i pixel neri nascondono e i pixel bianchi mostrano, con i grigi che danno opacità parziale. clip-path non può farlo.
• Elaborazione delle immagini per ritagli permanenti.Se vuoi che il file immagine finale stesso sia ritagliato a una forma (dimensione del file più piccola, nessun overhead di clip-path, nessun rischio di fallback non ritagliato), fai il ritaglio in un editor di immagini o nel nostro strumento Image Compressor. clip-path è per il mascheramento al momento del display su elementi HTML; se il target è un asset immagine statico, ritaglia direttamente il file.
• Figma o Sketch per mockup di design.Durante il prototipo di un layout, gli strumenti vettoriali di Figma gestiscono l'esplorazione di forme complesse più velocemente del trascinamento delle maniglie clip-path. Usa lo strumento di design per trovare la forma che vuoi, poi traduci la forma finale in CSS clip-path per la produzione. Lo strumento di design gestisce anche iterazioni, cronologia di undo e commenti del team meglio di un generatore CSS in tempo reale.

Altre domande frequenti

Posso usare percentuali o pixel per le coordinate dei vertici?

Entrambi funzionano. Le percentuali si scalano con la box dell'elemento, quindi un poligono definito in percentuali mantiene la sua forma proporzionale quando l'elemento si ridimensiona. I pixel sono assoluti, quindi un poligono con coordinate pixel mantiene la stessa dimensione indipendentemente dall'elemento. Usa percentuali per forme che dovrebbero ridimensionarsi con il layout (la maggior parte dei casi) e pixel per forme che necessitano di posizioni pixel esatte (per esempio, allineamento a un elemento di design specifico). Puoi anche mescolare: polygon(50% 10px, 100% 50%, ...) è valido.

clip-path influenzerà SEO o lettori di schermo?

No. clip-path è una proprietà puramente visiva. L'HTML sottostante è completamente accessibile: il testo all'interno di un elemento ritagliato è ancora indicizzato dai motori di ricerca, ancora annunciato dai lettori di schermo, ancora selezionabile tramite navigazione da tastiera. Usa clip-path per lo styling visivo; non usarlo come modo per nascondere il contenuto semanticamente (quello richiede display: none o attributi aria-hidden). Il contenuto visivamente ritagliato rimane presente nell'albero di accessibilità.

Come rendo un clip-path responsive?

Usa percentuali invece di pixel e controlla il risultato a diversi breakpoint. Per forme che necessitano di proporzioni diverse su mobile rispetto a desktop, usa media query CSS per scambiare il valore clip-path: dichiara un clip-path diverso all'interno di @media (max-width: 768px) per la forma mobile. Per esigenze responsive complesse (per esempio, un poligono che diventa un cerchio su mobile), considera l'uso di JavaScript per ricalcolare il clip-path basato sulla dimensione della finestra, anche se gli approcci puri CSS gestiscono la maggior parte dei casi.

clip-path può essere applicato a video e iframe?

Sì. clip-path funziona su qualsiasi elemento HTML, inclusi e