CSS Clamp Calculator
Generate a clamp() value that scales type or spacing smoothly between two screen sizes, with a live preview.
Use the tool
> root font size
> value unit
48px to 80px at a 16px root
> apply to
Your clamp() function
clamp(3rem, 2.3333rem + 2.963vw, 5rem)
CSS declaration
font-size: clamp(3rem, 2.3333rem + 2.963vw, 5rem);
> the math
slope = (80 - 48) / (1440 - 360) = 0.02963 px per px
preferred = 37.3333px + 2.963vw = 2.3333rem + 2.963vw
intercept = 48 - 0.02963 x 360 = 37.3333px (2.3333rem)
Live preview
size
64px
in rem
4rem
range
fluid
900px wide64px
Fluid type
box = size
Type scale (batch)
Turn this on to generate a whole modular scale as CSS custom properties. The min and max values above become step 0.
Percent roots change what 1rem means. With 62.5% the root is 10px, so 3rem is 30px.
> how to use it
- 01
Pick your root font size and whether you want to enter values in rem or px.
- 02
Enter the smallest and largest device widths and the size you want at each.
- 03
Copy the clamp() function or the full declaration. Drag the preview slider to check it at any width.
- 04
Turn on the type scale to generate a set of steps as CSS custom properties.
FAQ
CSS Clamp Calculator questions.
What does CSS clamp() do?
It sets a value that grows with the screen width but never goes below a minimum or above a maximum, so you need no media queries for fluid sizes.
How is the middle value calculated?
A straight line through two points: the minimum size at the minimum width and the maximum size at the maximum width. Its slope becomes the vw part and its starting point becomes the rem part. The math is shown under the result.
Why use rem instead of px?
Rem units respect a visitor's browser font size setting, which is better for accessibility. The vw part scales with the screen, and the rem part keeps text responsive to user preferences.
What does the root font size option change?
If your CSS sets html to 62.5%, 1rem equals 10px instead of 16px. The calculator needs to know which, so the rem values come out right for your project.
Can I use clamp for spacing?
Yes. The same formula works for padding, margins, gaps and widths. Pick the property to get a ready-to-paste declaration.