Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Clamp Calculator

Generate a responsive CSS clamp() for fluid type and spacing that scales smoothly between a min and a max size.

Size range
Viewport range
Preview

Fluid type scales smoothly.

The preview reflects the current window width. Resize to watch it change.

CSS
clamp(16px, calc(4.7324px + 3.0047vw), 48px)

Use it as a value for font-size, padding, gap, or any length.

How to build a fluid clamp() with CSS

  1. Set the size range

    Enter the minimum and maximum size and choose px or rem as the output unit.

  2. Set the viewport range

    Enter the viewport widths where the scaling should start and stop, such as 375 and 1440.

  3. Copy the clamp value

    Watch the live preview, then copy the generated clamp() value straight into your stylesheet.

Why use this tool

px or rem output

Switch the output unit with one tap. rem scales with the reader's browser font-size setting, and a root font-size field keeps the conversion exact.

Live resize preview

A sample line is styled with the generated value, so resizing the window shows the fluid scaling exactly as a browser renders it.

Viewport range control

Set the min and max viewport widths where the scaling starts and stops, from a small phone up to a wide desktop.

Copy-ready clamp value

The output is a complete clamp() value you can drop straight into font-size, padding, gap, or any length.

Free with nothing to upload

No account and no limits. Every calculation runs in your browser and nothing is sent to a server.

About this tool

Fluid type replaces a stack of media-query breakpoints with one CSS clamp() value that scales smoothly between a minimum and a maximum. Instead of jumping from one fixed font size to another at set widths, the text grows and shrinks continuously as the viewport changes, so a heading reads well on a phone, a tablet, and a wide monitor without a separate rule for each. The same value works for padding, gaps, and margins, which is why fluid spacing is built the same way.

The four numbers map directly to the output. The min size is what the value locks to on narrow screens, the max size is what it locks to on wide ones, and the two viewport widths set where that transition starts and ends. Between them the calculator works out a straight line: a fixed base length plus a viewport-relative term measured in vw. Below the min viewport the result holds at the min size, and above the max viewport it holds at the max size.

You can output the value in px or in rem. rem is the more accessible choice, because it responds to a reader's browser font-size setting while px does not. The live preview updates as you resize the window, so you can watch the exact value the browser will render before you ship it. When your layout is set, pair it with the aspect ratio calculator for media sizing or the gradient generator for backgrounds.

Frequently asked questions

Should I use px or rem?
Both produce the same visual size. rem is generally the better choice for text because it scales with a reader's browser font-size setting, which helps accessibility. px ignores that setting, so reserve it for cases where a fixed size is intentional. The root font-size field, default 16, keeps the two in sync.
How does the clamp() formula work?
clamp() takes a minimum, a preferred value, and a maximum. The preferred value is a straight line between your two sizes: a fixed base plus a viewport-relative term in vw. The browser uses the preferred value while it sits between the min and max, and locks to the nearest bound outside that range.
What viewport widths should I use?
Set the min viewport to your smallest supported screen, often around 320 to 375, and the max to where your layout stops widening, commonly 1280 to 1536. The default 375 to 1440 covers most sites. Values outside that range simply hold at the min or max size.
Do browsers support clamp()?
Yes. clamp(), along with min() and max(), is supported in every current major browser, so a generated value works without a fallback in modern projects.
Is anything uploaded?
No. The calculation runs entirely in your browser. Nothing you type is sent to a server, stored, or logged.

Related tools