CSS Clamp Calculator
Generate fluid clamp() values for responsive typography and spacing.
About this tool
Generate fluid clamp() values for responsive typography and spacing. Experiment with motion, layout, and color in real time — then copy values into your stylesheet.
Enter minimum, preferred (often viewport-based), and maximum values. Choose the CSS property (font-size, padding, width, …). Example — Fluid type scale: try `min: 1rem, preferred: 2vw, max: 2rem, property: font-size` and expect something like `.element { font-size: clamp(1rem, 2vw, 2rem); }`.
Preferred expressions that never intersect the min/max range can look “stuck”. See also: Flexbox & Grid Playground, CSS Unit Converter, and Color Contrast Checker. Runs in your browser — nothing you paste gets uploaded.
How to use
- Enter minimum, preferred (often viewport-based), and maximum values.
- Choose the CSS property (font-size, padding, width, …).
- Copy the clamp(min, preferred, max) declaration.
- Test at narrow and wide viewports to confirm the fluid range feels right.
Example
Fluid type scale
Input
min: 1rem, preferred: 2vw, max: 2rem, property: font-size
Output
.element {
font-size: clamp(1rem, 2vw, 2rem);
}Limitations
- Preferred expressions that never intersect the min/max range can look “stuck”.
- Does not solve the full utopia/fluid-type formula for every type scale automatically.
- Root font-size changes affect rem-based clamps — verify against your html font size.
Related guides
1Related tools
3Frequently asked questions
What does the CSS Clamp Calculator do?
Generate fluid clamp() values for responsive typography and spacing. Runs in your browser — no install, no account.
How do I use the CSS Clamp Calculator?
Enter minimum, preferred (often viewport-based), and maximum values. Choose the CSS property (font-size, padding, width, …). Copy the clamp(min, preferred, max) declaration. Test at narrow and wide viewports to confirm the fluid range feels right.
Is the CSS Clamp Calculator free?
Yes. No signup, no usage limits, no paywall.
Does the CSS Clamp Calculator upload my data?
No. Processing happens locally in JavaScript. Your input is not uploaded, stored, or logged.
What are the limitations of the CSS Clamp Calculator?
Preferred expressions that never intersect the min/max range can look “stuck”. Does not solve the full utopia/fluid-type formula for every type scale automatically. Root font-size changes affect rem-based clamps — verify against your html font size.