CSS calc() Playground
Costruisci e testa espressioni CSS calc() visivamente. Anteprima calcoli con unità miste. Template di esempi comuni. Copia il codice CSS. Gratuito, 100% nel browser.
Riferimento
Cos'è CSS calc()?
La funzione calc() permette di specificare valori di proprietà CSS tramite espressioni matematiche. Può miscelare unità diverse (px, %, rem, vw ecc.), risultando molto utile per layout responsivi. Supporta addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/).
Unità utilizzabili
px — pixel. Valore fisso. % — percentuale dell'elemento genitore. rem — multiplo della dimensione del font dell'elemento radice. em — multiplo della dimensione del font dell'elemento genitore. vw / vh — percentuale della larghezza/altezza del viewport. vmin / vmax — percentuale della dimensione minore/maggiore del viewport.
Esempi comuni
Larghezza piena meno padding — width: calc(100% - 2rem). Tipografia fluida — font-size: calc(1rem + 1vw). Centratura — margin-left: calc(50% - 150px). Layout griglia — width: calc(33.333% - 20px).
Privacy
Tutta la generazione avviene al 100% nel tuo browser. Nessun dato viene inviato a server.