CSS clamp() Calculator
Generate a fluid clamp() value that scales smoothly between a minimum and maximum size across viewport widths.
Scales linearly between the minimum size at the minimum viewport width and the maximum size at the maximum viewport width, then stays fixed outside that range — the standard "fluid typography" pattern.
Processing happens locally in your browser. Nothing you enter is uploaded.
How It Works
Enter your minimum and maximum sizes and the viewport widths they should apply at. Copy the generated clamp() value directly into your CSS.
clamp(minimum, minimum + slope × viewport width, maximum), where slope is the rate of change between your two size/viewport pairs
Example
A heading that's 16px at a 320px viewport and 32px at a 1280px viewport generates clamp(1rem, 0.6667rem + 1.6667vw, 2rem).
Frequently Asked Questions
- What does clamp() actually do?
- clamp(min, preferred, max) picks the preferred value, but never lets it go below min or above max — here, the preferred value is a formula that scales linearly with viewport width, creating smooth fluid scaling between your two breakpoints.
- Why use vw units in the preferred value?
- vw (viewport width) is what makes the value respond to screen size — 1vw equals 1% of the viewport width, so combining it with a fixed rem offset produces the linear scaling effect.
Related Tools
PX to REM Converter
Convert pixel values to rem units for CSS, with a configurable root font size.
REM to PX Converter
Convert rem units to pixel values, with a configurable root font size.
Base64 Encoder / Decoder
Encode text to Base64, or decode Base64 back to plain text.
Color Converter
Convert between HEX and RGB color formats.
Hash Generator
Generate a SHA-1, SHA-256, or SHA-512 hash of any text.
HTML Encoder / Decoder
Encode text to HTML entities, or decode HTML entities back to plain text.