Generatore di angoli arrotondati
Border Radius Generator
Modella ogni angolo per conto suo, compresa la sintassi a due valori che dà la forma a squircle, ed esporta il CSS.
Arrotonda gli angoli di un riquadro con tutti e otto i valori di raggio a disposizione e — dato che «fammi uno squircle» arriva come la stessa domanda — disegna anche vere superellissi e forme in `clip-path`, che il `border-radius` non sa fare.
Anteprima
CSS
Angoli
In alto a sinistra
In alto a destra
In basso a destra
In basso a sinistra
Preimpostazioni
clip-path
Una proprietà diversa con un compito diverso. border-radius arrotonda una scatola; clip-path ritaglia una forma qualsiasi e si porta via anche l’ombra.
Come si usa
Trascinare i cursori degli angoli
Quattro angoli, in px o in percentuale. L’anteprima e la dichiarazione si aggiornano insieme.
Disattivare «uguale sui due assi» per le forme a blob
Si ottiene così la forma a otto valori con la barra, in cui ogni angolo ha un raggio orizzontale e uno verticale. Ogni forma organica a blob nasce da lì.
Passare a clip-path quando la forma non è un rettangolo
Cerchi, poligoni, un fumetto, un chevron — e il cursore della superellisse, che è la curva squircle vera e propria e non un rettangolo più arrotondato.
Domande frequenti
Perché un raggio di 9999px ha lo stesso aspetto del 50%?
Perché quando i raggi di uno stesso lato si sovrapporrebbero, la specifica riduce *tutti e quattro* dello stesso fattore finché non ci stanno. Così qualunque valore assurdamente grande collassa sulla stessa forma, e la pagina mostra il fattore che ha usato.
Il CSS sa disegnare uno squircle vero?
Non con il `border-radius`: quell’angolo è rigorosamente ellittico, quindi un «cursore squircle» applicato a un raggio è solo un rettangolo più arrotondato. La superellisse qui è disegnata come poligono in `clip-path`, che oggi è il modo onesto di ottenere quella curva.
Perché con clip-path la mia ombra è sparita?
Perché il `clip-path` ritaglia l’elemento e l’ombra è disegnata fuori dall’elemento. Ritaglia anche i figli che debordano. Il `border-radius` non fa né l’una né l’altra cosa, ed è per questo che resta lo strumento giusto ogni volta che la forma è un rettangolo arrotondato.
Come arrotondo solo gli angoli esterni di un gruppo?
Arrotondando il contenitore e dandogli `overflow: hidden`, oppure usando `:first-child` e `:last-child` sugli elementi. Un raggio per angolo sul gruppo stesso non arriva ai figli, ed è di solito quello che va storto con un gruppo di pulsanti.
Può ricevere da
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Calcolo delle dimensioni fluide
Fluid Size Calculator
Calcola l’espressione clamp() che fa variare una dimensione con continuità fra due larghezze di viewport.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Generatore di ombre CSS
Box Shadow Generator
Compone ombre di riquadro e di testo su più livelli con anteprima dal vivo e restituisce il CSS.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.