CSS Clamp ジェネレーター
流体レスポンシブな CSS clamp() 式を生成します。
パラメーター
値の範囲
ビューポート範囲
プリセット
出力
clamp() 式
clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem)計算内訳
0.8333vw0.8333remスケールプレビュー
CSS 使用例
font-size: clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem);
padding: clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem);
gap: clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem);What Is the CSS Clamp Generator?
The CSS clamp generator calculates fluid clamp() expressions for responsive typography and spacing. Enter your minimum and maximum values along with the viewport breakpoints, and the tool outputs a ready-to-use clamp() formula that scales smoothly between the two sizes.
No more magic numbers or media query breakpoints for every font size — one fluid clamp expression handles the full range from mobile to desktop.
How to Use the CSS Clamp Generator
- Choose your unit: px for absolute values or rem for scalable values.
- Enter the minimum value — the size at the smallest viewport.
- Enter the maximum value — the size at the largest viewport.
- Set the min viewport width (e.g. 320px for mobile).
- Set the max viewport width (e.g. 1280px for desktop).
- Copy the generated
clamp()expression and paste it into your CSS.
Features
- Generates mathematically correct
clamp()using linear interpolation - Supports both px and rem input units
- Configurable rem base (default 16px)
- Breakdown panel showing slope and intercept values
- Visual scale preview at min, mid, and max viewport widths
- 4 built-in presets for common use cases
- One-click copy to clipboard
FAQ
What is CSS clamp()?
CSS clamp(min, preferred, max) clamps a value between a minimum and maximum. The preferred value is typically a viewport-relative expression (vw), so the result scales fluidly with the viewport width while never going below min or above max.
How is the clamp() formula calculated?
The tool uses linear interpolation: slope = (maxValue − minValue) / (maxViewport − minViewport). The preferred value is slope × 100vw + intercept, where intercept = minValue − slope × minViewport. All values are converted to rem for browser consistency.
Why use rem instead of px in clamp()?
Using rem respects the user's browser font-size preference. If a user sets their browser to 20px base, rem-based clamp() values scale accordingly, improving accessibility. px values are absolute and ignore user preferences.
Can I use clamp() for spacing and padding, not just font-size?
Yes. clamp() works with any CSS length property: font-size, padding, margin, gap, width, height, and more. The CSS Usage section in the output shows example property declarations.