Skip to content
Runs privately in your browser

Free Online CSS Clamp Calculator

Calculate a fluid font-size clamp from minimum and maximum widths and pixel sizes, using a supplied rem reference.

Your input stays on this device. Processing is bounded; regex runs in a worker with a two-second timeout.

Result



How to use CSS Clamp Calculator
Calculate a fluid font-size clamp from minimum and maximum widths and pixel sizes, using a supplied rem reference.
  1. Set Min Width.
  2. Set Max Width.
  3. Set Min Size.
  4. Set Max Size.
  5. Set Root Size.
  6. Run the tool, review the result and its stated limitations, then copy or download if needed.
Example & practical use
Calculate a fluid font-size clamp from minimum and maximum widths and pixel sizes, using a supplied rem reference. The example below demonstrates Min Width; Max Width; Min Size; Max Size; Root Size.
Example input:
{
  "minWidth": 320,
  "maxWidth": 1280,
  "minSize": 16,
  "maxSize": 32,
  "rootSize": 16
}
Expected result (relevant fields):
"font-size: clamp(1rem, 0.666667rem + 1.666667vw, 2rem);"
Features & result limitations
Calculate a fluid font-size clamp from minimum and maximum widths and pixel sizes, using a supplied rem reference.
Frequently asked questions
What inputs does CSS Clamp Calculator accept?
Min Width; Max Width; Min Size; Max Size; Root Size
How should I interpret the CSS Clamp Calculator result?
Calculate a fluid font-size clamp from minimum and maximum widths and pixel sizes, using a supplied rem reference.
Where does CSS Clamp Calculator process my data?
Inputs are processed locally in your browser. Submitted text is not sent to external services. A successful-run event increments an aggregate tool counter without your input.