CSS clamp() Calculator for Fluid Type and Spacing
Scale a font size or spacing value smoothly between two viewport widths. Enter the min and max sizes and breakpoints to get a ready-to-paste CSS clamp() value.
How to build a fluid clamp() value
- Enter the smallest size in px and the viewport width where it should apply.
- Enter the largest size in px and the viewport width where it should apply.
- Copy the generated clamp() value into your stylesheet.
Examples
Fluid heading from 16px to 32px
min 16px at 320px, max 32px at 1280px
clamp(1rem, 0.6667rem + 1.6667vw, 2rem)
Frequently asked questions
What does CSS clamp() do?
clamp(min, preferred, max) returns the preferred value but never smaller than the min or larger than the max. With a vw-based preferred value it scales fluidly with the viewport.
Why mix rem and vw in the output?
The rem part is a fixed base that respects the user's root font size, and the vw part adds the fluid growth. Together they draw the line between your two breakpoints.
How is the vw slope calculated?
The slope is (maxSize minus minSize) divided by (maxViewport minus minViewport), then multiplied by 100 to express it in vw.
Can I change the root font size?
Yes. The default is 16px. If your project uses a different root size, set it so the rem values convert correctly.
Does the value respect user zoom and accessibility?
Because the base is in rem, the value scales with the user's font preferences, which keeps fluid type accessible.
Related tools
CSS Unit Converter
Convert between CSS units px, rem, em and pt online. Set the root font size, enter a value, and get the result in every unit instantly.
Type Scale Generator
Generate a modular typographic scale from a base size and ratio. Get px and rem font sizes for every step, ready to drop into your CSS. Free and instant.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base32 Encode
Base32 encode and decode text online using the standard RFC 4648 alphabet with proper padding. UTF-8 safe, fast and private in your browser.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.