Generatore di CSS clamp()
Genera valori CSS fluidi e responsivi con clamp(). Scala in modo uniforme tra dimensioni minime e massime lungo gli intervalli del viewport.
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
Come usare questo strumento
- 1
Enter the minimum size in pixels (the value at and below your small viewport).
- 2
Enter the maximum size in pixels (the value at and above your large viewport).
- 3
Set the min and max viewport widths in pixels that define where scaling starts and stops.
- 4
Read the generated clamp() declaration and click Copy to paste it into your stylesheet.
Che cos'è il Generatore di CSS clamp()?
La funzione CSS clamp(min, preferito, max) mantiene un valore vincolato consentendogli al contempo di scalare in modo fluido all'interno dell'intervallo. Perfetta per la tipografia responsiva che cresce in modo uniforme con la larghezza del viewport anziché saltare ai punti di interruzione. Questo strumento calcola la formula corretta del valore preferito a partire dalle sue dimensioni dei caratteri minime/massime e dalle larghezze del viewport.
Casi d'uso comuni
Building fluid headings that grow from 24px on mobile to 48px on desktop without writing media-query breakpoints.
Setting responsive body copy that stays readable between a 320px phone and a 1200px laptop.
Scaling section padding or gap values fluidly so layouts breathe proportionally across screen sizes.
Replacing a stack of font-size overrides at 480px, 768px, and 1024px with one clamp() declaration.
Generating clamp() values for a design system so spacing and type scale consistently from one formula.
Quickly checking the px and vw math for a fluid value you sketched out in a design tool like Figma.
Domande frequenti
Compatibilità con i browser?▼
Strumenti correlati
Convertitore di colori (HEX/RGB/HSL)
Converte i colori tra i formati HEX, RGB e HSL. Scelga un colore visivamente o inserisca i valori manualmente.
Generatore di box shadow CSS
Crea valori di box-shadow in CSS in modo visivo. Anteprima in tempo reale e copia del CSS generato.
Generatore di gradienti CSS
Crea gradienti CSS lineari e radiali. Scelga i colori in modo visivo e copi il CSS generato.
Generatore di curve di accelerazione cubic-bezier
Crea curve di accelerazione cubic-bezier per il CSS. Include preset standard.
Generatore di palette di colori
Genera palette di colori armoniose a partire da qualsiasi colore di base. Supporta schemi complementari, analoghi, triadici e monocromatici.
Generatore di border radius CSS
Crea valori complessi di border-radius in CSS in modo visivo. Controllo indipendente di ciascun angolo.