CSS Clamp Generator Online

Build a fluid font-size clamp from pixel sizes and viewport endpoints, with an explicit root font size. Free css clamp generator online, with no installation or account.

Tool capabilities

Input: Options
Output: CSS · Options

How to use CSS Clamp Generator

Build a fluid font-size clamp from pixel sizes and viewport endpoints, with an explicit root font size.

Change the colors, text or numeric controls above.
Compare the preview as you adjust the controls.
Copy the output or download it to your device.

CSS Clamp Generator · Example

Input

{
  "min": 16,
  "max": 32,
  "start": 320,
  "end": 1280,
  "root": 16,
  "viewport": 800,
  "text": "LocalKit"
}

Output

font-size: clamp(1rem, 0.66667rem + 1.66667vw, 2rem);

Build a fluid font-size clamp from pixel sizes and viewport endpoints, with an explicit root font size.

Usage notes

Inputs and results are processed on this device. Tool content is not sent to a processing server.

Export uses rem and vw. Set the root font size used by your page. The preview simulates the chosen viewport width.

CSS Clamp Generator