# CSS clamp calculator

> Generate fluid typography or spacing between viewport bounds.

[Open tool](https://www.toolcabana.com/st/css-clamp-calculator) · [Design and CSS](https://www.toolcabana.com/st/category/design-and-css)

Tool ID: css-clamp-calculator. Requested language: st. Description language: en. Complete guide translation: no; untranslated sections use English.

## Overview (en)

CSS clamp calculator creates a clamp() value that scales a font size or spacing linearly between a minimum and maximum pixel size across a viewport range. Enter both sizes and both viewport widths, which default to 16 to 32 px between 320 and 1280 px viewports, and get a calc() expression combining px and vw plus a live text preview.

## Supported tasks (en)

Generate fluid typography or spacing between viewport bounds.

## Steps (en)

1. Enter the requested values in the settings panel.
2. Adjust the basic settings, then open Advanced mode for export and fine-tuning options. Custom settings stay active when the panel is closed.
3. Run css clamp calculator, review the output, then use the available copy or download controls.

## Settings

- Minimum font / spacing (px) (en; key: minSize; type: number); minimum: 0; maximum: 1000
- Maximum font / spacing (px) (en; key: maxSize; type: number); minimum: 0; maximum: 1000
- Minimum viewport (px) (en; key: minViewport; type: number); minimum: 1; maximum: 10000
- Maximum viewport (px) (en; key: maxViewport; type: number); minimum: 1; maximum: 10000

## Limitations (en)

Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.

## Privacy and connections (en)

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

## Questions (en)

### How do I calculate a fluid font size with CSS clamp?

The slope is the size difference divided by the viewport difference. The middle value becomes an intercept in px plus the slope times 100 in vw, so the size reaches the minimum at the small viewport and the maximum at the large one. The calculator does this for you.

### Why does the clamp calculator output px instead of rem?

All inputs and outputs are in pixels, and the middle term combines px with vw rounded to six decimals. If your design system uses rem, divide the pixel values by your root font size after copying the result.

### What causes the error that maximum viewport must exceed minimum?

The maximum viewport must be larger than the minimum viewport, and the maximum size cannot be smaller than the minimum size. Equal sizes are allowed and produce a fixed value. Swap the fields if you entered them in the wrong order.

### Where is my input processed?

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

### What are the input limits?

Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.

## Related tools

- [CSS grid layout generator](https://www.toolcabana.com/st/css-grid-layout-generator)
- [CSS flexbox playground](https://www.toolcabana.com/st/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/st/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/st/css-clip-path-maker)