Générateur de CSS Clamp
Generate fluid CSS clamp values from minimum and maximum sizes.
Formula and method
This calculator computes Slope, Intercept directly in your browser without sending data to an external server.
Mathematical formula
- Slope:
maxViewport===minViewport ? 0 : ((maxSize-minSize) ÷ (maxViewport-minViewport)) × 100 - Intercept:
maxViewport===minViewport ? minSize : minSize - ((maxSize-minSize) ÷ (maxViewport-minViewport)) × minViewport
Variables and parameters
- Minimum size (minSize): default value 18 px.
- Maximum size (maxSize): default value 48 px.
- Minimum viewport (minViewport): default value 390 px.
- Maximum viewport (maxViewport): default value 1200 px.
Some formulas are undefined for certain input combinations (such as division by zero or logarithms of non-positive numbers). In those cases the live tool displays an alert instead of NaN.
Embed this tool
Paste this snippet into your own site or blog post to embed a live, working copy of this tool. It links back to the full page on SpecWhale.
Frequently asked questions
What equation and variables does CSS Clamp Generator use?
CSS Clamp Generator evaluates outputs such as <strong>Slope, Intercept</strong> based on inputs including Minimum size, Maximum size, Minimum viewport, Maximum viewport. Check the Mathematical Method section for the explicit formula.
What happens if I enter invalid or zero values into CSS Clamp Generator?
If an input combination is mathematically undefined (such as division by zero or negative square roots), SpecWhale alerts you gracefully rather than returning invalid NaN outputs.
Are my calculations in CSS Clamp Generator saved or private?
All calculations are 100% private and run locally in your Web browser. Your numbers are never uploaded to any server, but can be saved locally to your device or exported as CSV/JSON.
Is CSS Clamp Generator free to use?
Yes. CSS Clamp Generator is completely free, has no usage limit, and does not require an account, email, or API key.
Does CSS Clamp Generator store or upload my data?
No. CSS Clamp Generator calculates everything locally in your browser. Nothing you type is sent to a server or stored by SpecWhale.
How accurate is CSS Clamp Generator?
CSS Clamp Generator uses a standard formula (see the Method section above for the exact expression). For high-stakes financial, medical, or legal decisions, confirm the result with a professional or an authoritative source before relying on it.
Can I embed CSS Clamp Generator on my own website?
Yes. Use the "Embed this tool" snippet on this page to add a free, working copy of CSS Clamp Generator to your own blog post or page.