How do I generate a CSS clamp() for fluid font size?

Enter Min size (px), Max size (px), Min viewport (px) and Max viewport (px). The tool outputs a ready-to-copy CSS value, such as clamp(1rem, ..., 2rem), with a vw-based preferred value between your two sizes.

Should I choose rem or px output?

Use the Output unit selector. With rem, pixel values are divided by the Root font size (px), default 16, so text follows the user's browser font setting. Pixel output gives fixed px values.

Does it give me a Tailwind class?

Yes. Below the CSS value there is a Tailwind class, in the form text-[clamp(...)], with spaces replaced by underscores. Copy it with its own Copy button. It uses the text- prefix, so edit that for other properties.

Why does it warn that my max size is too large?

When the max size is more than 2.5 times the min, an accessibility note appears: zoomed text may not reach 200 percent of its size (WCAG 1.4.4). Keep max at or below 2.5 times min.

How can I preview the result before using it?

Drag the preview slider to any viewport from 320 to 1920 px. The sample text and its computed pixel size update live, and sizes are also shown at the min, middle and max viewport.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

📐

Free CSS clamp() Generator

Generate a fluid CSS clamp() value for responsive typography and spacing. Set min/max size and viewport range, see a live preview, and copy the one-line CSS.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Works offline once loaded

Min size (px)

Max size (px)

Min viewport (px)

Max viewport (px)

Output unit:

Root font size (px)

CSS value

font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);

Tailwind class

text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]

Drag to preview any viewport768px wide → 21.9px

Aa 22px

Rendered size at different viewports

375px wideAa 16px

908px wideAa 24px

1440px wideAa 32px

clamp(min, preferred, max) scales a value fluidly with the viewport, then locks at the min and max. It replaces stacks of media queries for typography, spacing, and widths with a single line.

Common uses

Create Fluid Responsive TypographyScale font sizes smoothly between mobile and desktop with one line.
Fluid Margins & PaddingMake section spacing grow with the viewport instead of jumping at breakpoints.
Replace Media Queries with clamp()Collapse stacks of breakpoint overrides into a single fluid value.
Build a Fluid Type ScaleGenerate consistent clamp() steps for a design-system type scale.
Fluid Hero & Display HeadingsMake big landing-page headlines scale dramatically yet safely.

How It Works

This tool computes CSS clamp() values using a hand-written linear interpolation formula — no libraries, no server round-trips. You enter two sizes and two viewport widths; the math runs instantly in your browser and produces a ready-to-paste clamp() expression with a vw-based preferred value that scales your type or spacing smoothly between those breakpoints.

1
Linear slope calculation
The tool computes a pixel-per-pixel slope: (maxSize - minSize) / (maxViewport - minViewport). This slope is then converted to vw units by multiplying by 100, which is the core of how CSS viewport-relative scaling works.
2
Intercept derivation
An intercept offset (in px or rem) is calculated so the linear function hits exactly your minimum size at the minimum viewport. Together, slope and intercept form the preferred value inside clamp() — the part that actually scales.
3
Unit conversion and output formatting
If you choose rem output, every pixel value is divided by your configured root font size (default 16px) before being written into the clamp() string. A matching Tailwind arbitrary-value class is also produced, with spaces replaced by underscores per Tailwind's syntax.
4
Live viewport slider preview
A range slider lets you scrub from 320px to 1920px wide. At each position the same slope-and-intercept formula evaluates the clamped size in real time and renders sample text at that computed pixel size, so you can see the scaling behaviour before copying anything.