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.
Cosa significa la sintassi a 8 valori di border-radius?
Nella sintassi border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, i valori prima della barra sono i raggi orizzontali (alto sinistra, alto destra, basso destra, basso sinistra) e quelli dopo sono i raggi verticali. Usare valori diversi in ogni direzione è ciò che crea le forme blob organiche.
Come uso il CSS generato?
Copia la riga border-radius e incollala in qualsiasi regola CSS dell'elemento da modellare, ad esempio .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Funziona in CSS puro, Sass, valori arbitrari Tailwind e stili inline.
Dove si usano le forme blob?
Le forme blob sono popolari per illustrazioni hero, avatar, foto profilo, card di funzionalità, pulsanti e sfondi decorativi nel design web e di app moderne.
Gli angoli arrotondati funzionano in tutti i browser?
Sì. border-radius è supportato da tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e i browser mobile, senza prefissi dei produttori.
Posso animare la forma blob?
Sì. border-radius è una proprietà animabile, quindi una transizione CSS consente una morphing fluida tra forme, ad esempio .blob { transition: border-radius .8s ease; }.
Qual è la differenza tra la sintassi a 4 e a 8 valori?
La forma a 4 valori assegna lo stesso raggio orizzontale e verticale a ogni angolo, sufficiente per pilole o cerchi. Quella a 8 valori separa i raggi orizzontali e verticali, permettendo forme asimmetriche e organiche.
Come creo un cerchio perfetto?
Imposta tutti gli otto valori al 50% su un elemento quadrato, o usa semplicemente border-radius: 50%. Puoi anche partire da un preset vicino al cerchio e affinarlo.
I miei dati vengono caricati da qualche parte?
No. Il generatore funziona interamente nel tuo browser con CSS e JavaScript puri. Nulla di ciò che trascini, digiti o copi viene inviato a un server.
Posso usarlo su elementi non quadrati?
Sì, ma i raggi percentuali sono relativi alle dimensioni dell'elemento, quindi un rettangolo avrà angoli ellittici e un aspetto diverso dall'anteprima quadrata. Usa i valori generati come punto di partenza e regolali.
Come usare Generatore di Border Radius
Il border-radius a otto valori produce forme organiche a blob con angoli ellittici che un comune rettangolo arrotondato non può eguagliare. Modellala con le maniglie e copia il CSS pronto — tutto viene renderizzato in diretta nel tuo browser.
- Trascina una qualsiasi delle otto maniglie poste sui bordi della forma: quelle sui bordi superiore e inferiore regolano i raggi orizzontali, quelle laterali i verticali.
- Clicca uno dei sei quadrati di forme predefinite per partire da un blob già disegnato, poi rifinisci i valori nei campi numerici Raggi orizzontali e Raggi verticali (uno per angolo, 0–100%).
- Premi Casuale per generare con un clic una nuova forma organica, o Reimposta per tornare alla forma e ai colori predefiniti.
- Scegli un Colore forma e uno Sfondo per vedere il blob sulla tua palette di destinazione — entrambi si aggiornano all'istante.
- Premi Copia CSS per prendere la dichiarazione border-radius mostrata in tempo reale nella barra in basso e incollarla su qualsiasi elemento.
Applica il codice a un elemento quadrato con overflow: hidden per il classico effetto blob; le percentuali mantengono la curva fluida a ogni dimensione e la barra della sintassi separa i raggi orizzontali da quelli verticali.
Strumenti correlati
- Generatore di Border Radius CSS Generatore visuale di border-radius CSS. Regola ogni angolo indipendentemente con anteprima in tempo reale e copia il codice CSS istantaneamente.
- 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 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 Palette Colori Crea bellissime palette di colori armoniose istantaneamente con il nostro generatore online gratuito. Supporta modalità monocromatica, analoga, complementare, triadica, split-complementare e tetradica. Regola i colori con cursori HSL, blocca i preferiti ed esporta come CSS, Tailwind, JSON o SVG. 100% basato su browser, i tuoi dati non lasciano mai il tuo dispositivo.
- 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.
- 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.