Skip to tool content
Toolioz logoToolioz

CSS Clamp Generator

A CSS clamp generator builds fluid type and spacing: clamp(min, intercept + slope × vw, max). A type-scale tab lists modular steps from a base size and ratio. The preferred value is linear between two viewports, not a magic 5vw.

Quick Summary & Direct Answer
DevTools

How does a CSS clamp() fluid type calculator work?

Slope is (maxPx − minPx) / (maxVw − minVw). Intercept is minPx − slope × minVw. The preferred term is intercept px + slope×100 vw. Wrap that in clamp(minPx, preferred, maxPx). From 16→32 px over 360→1240 px the CSS is clamp(16px, 9.4545px + 1.8182vw, 32px).

Key Takeaways

  • Two viewports and two font sizes fully determine the line.
  • Rem output divides by the typed root.
  • Type scale is independent: base × ratio^step.
  • Figma type-scale plugins are not required; the table is local.

clamp()

clamp(16px, 9.4545px + 1.8182vw, 32px)

remclamp(1rem, 0.5909rem + 1.8182vw, 2rem)
slope0.01818

Results can be wrong. This calculator is unofficial. Figures can be incomplete, rounded, or not updated. Use them at your own risk and check a tape, datasheet, ball band, or official chart before cutting, mixing, buying, or publishing. Limits of liability are in the terms of service.

Frequently asked questions

Both. Any two sizes over two viewports work for type or spacing.

Explore Related Tools

PX to REM Converter

Converts pixels to rem and em at a chosen root font size, with a common-size table.

Try tool

Tailwind Color Generator

Builds 50–950 OKLCH shades and Tailwind v4 @theme tokens from a seed hex.

Try tool

CSS Grid Builder

Visually build CSS Grid layouts with rows, columns, gaps, and code export.

Try tool

Publisher notes · reviewed 29 October 2026

Preferred is a linear function of viewport width

Slope = (maxPx − minPx) / (maxVw − minVw). Intercept = minPx − slope × minVw. clamp(min, intercept px + slope×100 vw, max). The type-scale tab is a modular scale, not fluid until a pair of steps is fed back into clamp.

Why not 5vw

5vw at 360 px is 18 px and at 1440 px is 72 px, which is rarely the design. Two-point interpolation is exact.

Worked examples

  • 16→32 over 360→1240

    clamp(16px, 9.4545px + 1.8182vw, 32px).

Limits of this page

  • Container queries are not generated.
  • User zoom still applies after clamp.

Sources