CSS Clamp Generator Color
Generate a fluid clamp() that scales smoothly between two viewport widths — no media queries.
CSS Clamp Generator is a free online tool that generate a fluid clamp() that scales smoothly between two viewport widths — no media queries. It runs entirely in your web browser using plain JavaScript, so files are processed on your own device and never uploaded to a server. There is no sign-up, no file size limit imposed by the site, no watermark and no paid tier.
- Price
- Free — no account, no quota, no watermark
- Category
- Color
- Where it runs
- In your browser, on your device
- Files uploaded
- None
- Technology
- plain JavaScript
- Settings
- 6
- Works offline
- Yes, after the first visit
About CSS Clamp Generator
clamp() replaces a stack of breakpoints with one line by interpolating linearly against the viewport. The trap is that a value expressed purely in `vw` does not respond to browser zoom or to the reader's font-size setting, so text sized that way cannot be enlarged by someone who needs it larger — a WCAG 1.4.4 failure. Keeping a `rem` term in the preferred value fixes it, and this always emits one.
How to use it
- Enter size at the small viewport, size at the large viewport and small viewport.
- Adjust the remaining 3 settings if the defaults do not fit your case.
The 6 settings
| Setting | What it does | Default |
|---|---|---|
| Size at the small viewport | Range 1–400px. | 16px |
| Size at the large viewport | Range 1–400px. | 32px |
| Small viewport | Range 200–2000px. | 360px |
| Large viewport | Range 200–4000px. | 1280px |
| Root font size | Range 8–32px. | 16px |
| Property | Choose from 5: font-size, padding, gap, margin-block, width. | font-size |
Under the hood
| Runs on | plain JavaScript — runs the whole thing |
| Controls | Size at the small viewport, Size at the large viewport, Small viewport, Large viewport, Root font size, Property |
Questions
Why does the middle value have a rem term?
Because a pure `vw` value ignores zoom. Someone who sets a larger default font size, or zooms the page, gets no change at all in text sized only by viewport width. The `rem` component is what keeps it responsive to both, and it costs nothing.
What viewport range should I use?
360px to 1280px covers phone through laptop and is a sensible default. Going below 320px is unnecessary — nothing modern is narrower — and going above 1440px usually means the text keeps growing on large monitors past the point where it helps.
Can I use clamp for things other than font size?
Yes, and it is often more valuable there. Fluid padding, gaps and section spacing scale a layout far more convincingly than fluid type alone, and they have none of the accessibility caveat since they are not text.