win-j logo
Personal Tech Blog

Developer Design Utility

CSS Clamp Generator

Enter minimum size, maximum size, and viewport range to generate CSS clamp() values for responsive font-size, padding, margin, gap, and more.

Fluid CSS Calculation Generate clamp() values that scale smoothly between a mobile minimum value and a desktop maximum value.
Live Preview Check the estimated px value and visual result based on the current viewport width.
Copy-ready CSS Copy practical CSS code including selector, property, and optional CSS variable output.
STEP 1

Clamp Value Input

Enter minimum and maximum sizes with a viewport range, and the CSS clamp() code will be calculated automatically.

rem output uses 1rem = 16px. A different root font size on your site changes the rendered sizes.

STEP 2

Preview

Check how the generated clamp() value changes according to the screen size.

Ready
Live Preview Responsive CSS Clamp

Check responsive CSS values that change naturally with the screen size.

Generate CSS to see the preview and calculated value.

Current viewport: - Estimated value: - Range: -
STEP 3

Generated Result

Check the calculated clamp() value and CSS code.

Enter values and click Generate Clamp.
STEP 4

Recommended Use Cases

clamp() is especially useful for elements that need fluid size changes in responsive UI.

Hero Title Landing page titles that stay smaller on mobile and larger on desktop.
Card Padding Inner card spacing that grows naturally according to screen size.
Grid Gap Smoothly adjust spacing between mobile and desktop layouts.
Border Radius Useful when creating softer card-style UI on larger screens.
Practical guide

Create a fluid CSS value from two viewport anchors

Set a minimum and maximum size plus the viewport widths where they apply. Generate a clamp() expression for font size or spacing, then inspect the code and current preview calculation.

Prepared & reviewed by
win-j
Last reviewed
2026-09-30

Who this helps

  • Developers building responsive typography
  • Designers creating fluid spacing tokens

When to use this tool

  • Grow a heading between mobile and desktop widths.
  • Scale card padding within a fixed range.

From input to a checked result

  1. 1

    Enter the minimum and maximum size in px.

  2. 2

    Enter the minimum and maximum viewport width.

  3. 3

    Choose a CSS property, selector and px or rem output.

  4. 4

    Optionally enable a CSS variable, then generate.

  5. 5

    Test below, within and above the viewport interval, including zoom and root-font changes.

Example 1

Heading from 32px to 64px

Input
Size 32–64px · viewport 360–1440px · rem
Result
clamp(2rem, 2.963vw + 1.3333rem, 4rem)

With a 16px root font, the value is about 48px at a 900px viewport. Coefficients are rounded.

Example 2

Card padding

Input
Size 16–32px · viewport 375–1200px · rem · padding
Result
padding: clamp(1rem, 1.9394vw + 0.5455rem, 2rem);

At 787.5px viewport and a 16px root font, padding is about 24px on all four sides.

Example 3

Negative intercept

Input
Size 10.5–30.5px · viewport 400–800px · px
Result
clamp(10.5px, 5vw - 9.5px, 30.5px)

The value is 20.5px at 600px, and is clamped to 10.5px below 400px and 30.5px above 800px.

How it works

Slope is the size difference divided by the viewport difference; multiplying it by 100 gives the vw coefficient. The intercept makes the preferred value meet the lower anchor. Output is rounded to four decimals; rem values use a fixed 16px conversion basis.

Limitations

  • Sizes must be nonnegative and strictly increasing; viewport widths must be at least 1px and strictly increasing.
  • Coefficients are limited to ±1,000,000 and must keep a nonzero range after rounding.
  • A different root font changes rem endpoints and the viewport locations where limits apply.
  • Only the listed preview properties are rendered here. Other supported length properties can generate code without a visual preview.
  • Selectors affect only output code; the tool does not apply them to other page elements.
Your data

Calculations and previews run in browser memory without saving the CSS inputs. Copy includes generated code and explanatory comments.

Frequently asked questions

Does rem output always reproduce the entered pixels?

Only at the 16px conversion basis, subject to rounding. At a 20px root, 2rem is 40px. Test the destination page's actual root font.

Can the size decrease as the viewport grows?

This generator requires maximum size greater than minimum size. Decreasing ranges are outside its supported input model.

Why is Copy disabled after an edit?

An invalid range or CSS setting clears the old output. Correct it to regenerate; if automatic copy fails, use the displayed manual-copy field.