SmartKitio

CSS Clamp Generator

Create a fluid font size that grows smoothly from a minimum size on small screens to a maximum size on large screens.

Your input stays in your browser. Nothing is uploaded.

About this tool

The preferred value is a straight line between your minimum size at a 320 px viewport and your maximum size at a 1280 px viewport, written as a vw term plus a px offset. Below 320 px the size stays at the minimum, and above 1280 px it stays at the maximum. The output uses px values; for better support of browser text zoom, you may want to convert the minimum, maximum, and offset to rem (divide by 16 for the default root size).

How to use it

  1. Enter the minimum and maximum font size in pixels.
  2. Copy the clamp() declaration into your CSS.
slope = (max − min) ÷ (1280 − 320) preferred = slope × 100 vw + (min − slope × 320) px

Examples

  • 16 px to 32 px

    slope = 16 ÷ 960 ≈ 0.016667, so font-size: clamp(16px, 1.6667vw + 10.6667px, 32px).

  • Check at 800 px

    1.6667% of 800 is 13.33, plus 10.67 = 24 px, halfway between the limits.

FAQ

Can I change the 320 and 1280 viewport limits?
Not in this tool. Use the formula above with your own breakpoints.
Is clamp() supported everywhere?
It is supported by all current major browsers.
Can I use it for spacing, not just fonts?
Yes. The same clamp() value works for padding, margins, or gaps.