{"uid":"cap_hMzlXM2rCQPL8iEXF6vEE","slug":"css-design-calc-fluid-clamp-generator-73b8c208","name":"CSS Design Calc – Fluid Clamp Generator","description":"Generate a CSS clamp() that scales a size linearly between a min and max viewport width, in rem, with the exact slope.","url":"https://css-design-calc.x402tookit.com/clamp-fluid?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["minSize","maxSize"],"properties":{"at":{"type":"number","description":"Optional viewport width in px to evaluate the result at"},"rootPx":{"type":"number","description":"Root font size in px for the rem output (default 16)"},"maxSize":{"type":"number","description":"Size at the maximum viewport, in px"},"minSize":{"type":"number","description":"Size at the minimum viewport, in px"},"maxViewport":{"type":"number","description":"Viewport width where scaling ends, px (default 1200)"},"minViewport":{"type":"number","description":"Viewport width where scaling starts, px (default 320)"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"css":{"type":["null","string"]},"asOf":{"type":["null","string"]},"maxRem":{"type":["null","number"]},"minRem":{"type":["null","number"]},"rootPx":{"type":["null","number"]},"source":{"type":["null","string"]},"cssInPx":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"slopeVw":{"type":["null","number"]},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"degraded":{"type":["boolean","null"]},"disclaimer":{"type":["null","string"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"interceptPx":{"type":["null","number"]},"interceptRem":{"type":["null","number"]},"sizeAtMidpointPx":{"type":["null","number"]},"sizeAtViewportPx":{},"evaluatedAtViewport":{}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_ms5vdtoYdNimW5UKmeyFA","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Generates a CSS clamp() expression that linearly scales a size between a minimum and maximum viewport width, returning the slope, intercept, and rem values.","exampleAgentPrompt":"Generate a CSS clamp() that scales a font size from 16px at a 320px viewport to 32px at a 1200px viewport, using a root font size of 16px, and tell me what size it evaluates to at 768px.","exampleUseCases":[{"title":"Fluid typography for a design system","prompt":"I'm building a design system and need a CSS clamp() that scales my heading from 24px on mobile (320px viewport) to 48px on desktop (1440px viewport) — give me the exact clamp expression and the slope in vw."},{"title":"Responsive spacing token generation","prompt":"Can you calculate a CSS clamp() for padding that goes from 12px at 375px viewport up to 40px at 1280px viewport? I need the rem values too, assuming a 16px root font size."},{"title":"Verifying fluid size at a specific breakpoint","prompt":"I have a fluid size that should be 14px at 320px and 22px at 1200px — what does the CSS clamp() look like and what exact size does it produce at a 960px viewport?"}],"resultDescription":"Returns a ready-to-use CSS clamp() string (in rem), the slope in vw units, the intercept in both px and rem, the min and max sizes in rem, the size evaluated at a given viewport width, the size at the midpoint viewport, a plain-language summary, and a verdict or any degraded/warning flags.","failureModes":["Missing required minSize or maxSize returns a validation error","minSize greater than maxSize may produce an inverted or nonsensical clamp","minViewport equal to maxViewport causes a division-by-zero in slope calculation","Non-numeric query parameters result in a parse/type error","Very large or very small px values may produce impractical rem outputs"],"whenToPreferThis":"Choose this endpoint when you need a mathematically precise CSS clamp() for fluid typography or spacing, specifically when you require the exact linear slope and intercept in both px and rem — especially useful for design-system tooling, code generators, or automated style-guide pipelines where manual calculation would be error-prone.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-29T13:15:02.858Z","isFirstParty":false,"canonicalSlug":"css-design-calc-fluid-clamp-generator-73b8c208"}