UTILITIES WORKSPACE
CSS Clamp Generator
Calculate fluid font-size CSS from two viewport widths and text sizes.
Input is processed on this site only when you run the tool. The application does not save inputs or results.
Configuration options
Result result.css
A little clarity goes here.
Run the tool to see your result.
Result preview
UTF-8 text, at most 262144 bytes per input. Tab leaves the editor. Plain text disables syntax colors. Browser textareas may normalize line endings to LF.
{"generate":{"inputMode":"none","options":{"minViewport":{"type":"integer","min":160,"max":7680,"default":360},"maxViewport":{"type":"integer","min":160,"max":7680,"default":1440},"minSize":{"type":"integer","min":1,"max":256,"default":16},"maxSize":{"type":"integer","min":1,"max":256,"default":32},"unit":{"type":"enum","values":["rem","px"],"default":"rem"},"rootSize":{"type":"integer","min":8,"max":64,"default":16}}}}{"generate":{"options":{"minViewport":360,"maxViewport":1440,"minSize":16,"maxSize":32,"unit":"rem","rootSize":16}}}A QUICK WALKTHROUGH
A familiar workflow,
with room to focus.
Set two viewport widths and the font size you want at each width, using whole pixels.
Choose px or rem output. For rem, set the root font-size assumption, then Generate.
Copy the CSS declaration. Check text zoom and your actual root font size in the destination design.
When to use CSS Clamp Generator
Create fluid font-size CSS between a known small-screen size and a larger-screen size without calculating the slope by hand.
Read the result
Copy the declaration and check the destination root font size. Endpoint specimens show the sizes you entered; rem conversion assumes the selected root, and rounded coefficients introduce a small tolerance.
SEE IT IN PRACTICE
Worked examples
Sample input. A result you can inspect.
Generate example
- Minimum viewport (px)
- 360
- Maximum viewport (px)
- 1440
- Minimum font size (px)
- 16
- Maximum font size (px)
- 32
- Output unit
- rem
- Root font size (px)
- 16
Expected result
/* 16px at 360px → 32px at 1440px. */ /* rem conversion assumes a 16px root font size. */ font-size: clamp(1rem, calc(1.481481vw + 0.666667rem), 2rem);{"kind":"clamp","title":"Fluid font-size CSS","code":"\/* 16px at 360px \u2192 32px at 1440px. *\/\n\/* rem conversion assumes a 16px root font size. *\/\nfont-size: clamp(1rem, calc(1.481481vw + 0.666667rem), 2rem);","minimum":16,"maximum":32,"copyRaw":true,"note":"Specimens show your two pixel sizes, not a live viewport simulation. Copy the CSS and test text zoom in your design.","schema":1}
Formats, limits and common errors
Use whole-pixel values in range, increase the maximum viewport, and keep the maximum font size at least as large as the minimum.
- Viewport widths: 160–7,680px; sizes: 1–256px; root assumption: 8–64px. Whole numbers only. Maximum viewport must exceed minimum; maximum size must not be smaller than minimum.
- Increasing and constant ranges are supported; decreasing ranges are not. Coefficients are rounded to six decimals, so endpoint sizes may differ slightly.
- rem output assumes the root size you enter. A different root font size changes the sizes and breakpoints. px output ignores the root-size setting.
- Endpoint specimens show the entered pixel sizes, not a live viewport simulation. The formula is calculated in PHP; no custom HTML or CSS is executed.
- A fluid formula does not guarantee accessible typography. Check zoom, larger browser text settings, wrapping and the readability of your design.
- Options only; no text input is accepted. Output: at most 8,192 UTF-8 bytes; serialized responses have a separate 1 MiB ceiling. Size/work failures return no partial result.