Generatore Clip Path CSS
Generatore online gratuito di clip-path CSS. Crea forme polygon, circle, ellipse e inset con punti trascinabili, anteprima live e copia del codice CSS in un clic.
Cos'è clip-path in CSS?
clip-path è una proprietà CSS che ritaglia un elemento secondo una forma base o un percorso. Tutto ciò che sta fuori dalla forma viene nascosto: puoi così trasformare un'immagine o un box rettangolare in un triangolo, cerchio, esagono, banner inclinato o qualsiasi poligono personalizzato senza modificare l'immagine.
Quali browser supportano clip-path?
Tutti i browser moderni supportano le funzioni di forma base usate da questo generatore: polygon(), circle(), ellipse() e inset(), inclusi Chrome, Edge, Firefox, Safari e Opera. Il prefisso -webkit-clip-path serve solo per versioni molto vecchie di Safari mobile.
Come funziona la modalità poligono?
In modalità poligono l'anteprima mostra ogni vertice come un punto trascinabile. Trascina un punto per spostarlo, fai doppio clic sullo spazio vuoto per inserirne uno nuovo, clicca un punto per selezionarlo e usa il pulsante elimina per rimuoverlo. Il valore CSS si aggiorna in tempo reale con coordinate percentuali.
Cosa significano le percentuali in polygon()?
Ogni vertice è scritto come coppia X Y in percentuale, misurata dall'angolo in alto a sinistra dell'elemento. Poiché i valori sono relativi alla dimensione dell'elemento, la forma si adatta ad esso e resta responsive a qualsiasi larghezza di schermo.
Qual è la differenza tra circle, ellipse e inset?
circle(raggio at x y) ritaglia un cerchio con un solo raggio, ellipse(rx ry at x y) permette raggi orizzontale e verticale diversi, e inset(alto destra basso sinistra) ritaglia un rettangolo ristretto da ogni bordo. Questo generatore offre cursori e campi numerici per tutti i parametri.
clip-path influisce sul layout o sui clic?
clip-path è puramente visivo. L'elemento conserva il suo box originale nel layout, quindi nulla attorno si sposta. Tuttavia gli eventi puntatore come i clic funzionano solo nell'area visibile ritagliata, utile per creare pulsanti di forma personalizzata.
Posso animare un clip-path?
Sì. I browser passano fluidamente da un valore clip-path a un altro quando la funzione di forma e il numero di punti coincidono, ad esempio da un inset grande a uno piccolo, o tra due poligoni con lo stesso numero di vertici. Anima con la proprietà CSS transition.
La mia immagine o i miei dati vengono caricati da qualche parte?
No. L'immagine di anteprima è un gradiente disegnato localmente su un canvas e tutti i calcoli avvengono nel tuo browser. Nulla di ciò che crei viene inviato a un server, quindi lo strumento funziona anche offline una volta caricato.
Quali sono gli usi comuni di clip-path?
Usi popolari includono sezioni hero diagonali, maschere avatar esagonali o circolari, punte triangolari dei fumetti, collage fotografici creativi, angoli di card smussati e pulsanti di forma personalizzata, tutto senza software di fotoritocco.
Come usare Generatore Clip Path CSS
Dai forma a qualsiasi elemento con CSS clip-path invece di modificare immagini. Scegli una funzione di forma, trascina le maniglie e copia CSS pronto per la produzione. Tutto gira localmente nel tuo browser.
- Scegli una modalità: Poligono, Cerchio, Ellisse o Inset.
- In modalità Poligono trascina i punti dei vertici, fai doppio clic nello spazio vuoto per aggiungere un punto e selezionane uno prima di eliminarlo.
- Nelle modalità Cerchio, Ellisse e Inset regola ogni valore con gli slider o digita una percentuale esatta.
- Guarda l'anteprima live aggiornarsi su un'immagine campione a gradiente generata localmente.
- Copia la regola clip-path su riga singola e incollala nel tuo foglio di stile.
Mantieni lo stesso numero di punti del poligono tra due stati e potrai animare la forma fluidamente con una transizione CSS.
Strumenti correlati
- Generatore Box Shadow CSS Generatore online gratuito di box-shadow CSS. Crea visivamente ombre bellissime con offset, sfocatura, diffusione, colore e inset regolabili. Anteprima live e copia codice istantanea.
- Generatore Gradienti CSS Crea stupendi gradienti CSS visivamente. Genera gradienti lineari, radiali e conici con più punti di colore, angoli e posizioni. Copia istantaneamente codice CSS pronto per la produzione.
- Generatore di Border Radius Generatore di border radius creativo gratuito online. Trascina 8 punti o scegli una forma blob per creare figure CSS organiche e copiare il codice all'istante.
- Convertitore Colore Convertitore colore online gratuito. Converti formati HEX, RGB, HSL, HSV istantaneamente con selettore visivo. 100% privato, funziona nel tuo browser.
- Generatore di Easing CSS Generatore online gratuito di easing CSS. Trascina i punti di controllo del cubic-bezier su una curva interattiva, scegli tra 18 preset, guarda una pallina in loop e copia la funzione di timing all'istante.
- Generatore Text Shadow CSS Generatore online gratuito di text-shadow CSS. Sovrapponi più livelli d'ombra con offset, sfocatura, colore e opacità, prova preset come Neon, 3D o Retro e copia il CSS all'istante.
- Abbellitore CSS Formatta e abbellisci il codice CSS istantaneamente. Converti CSS minificato in codice leggibile e ben indentato con opzioni personalizzabili.
- Minificatore CSS Minificatore CSS online gratuito. Comprimi e ottimizza istantaneamente il codice CSS rimuovendo spazi, commenti e caratteri non necessari. Riduci le dimensioni del file per migliori prestazioni web.