CSS Clamp Generator

How to Use the CSS clamp() Generator

1. Enter the viewport width range

Enter the range of screen widths over which the size should change in px under “Minimum Viewport Width” and “Maximum Viewport Width.”

For example, if you set the minimum to 375px and the maximum to 1440px, the specified size will change smoothly as the screen width moves from 375px to 1440px.

2. Enter the values for the minimum and maximum widths

Under “Value at Minimum Viewport,” enter the size to apply at the minimum viewport width. Under “Value at Maximum Viewport,” enter the size to apply at the maximum viewport width. Input values are in px.

If you enter the same value for both, the generator will output a fixed value instead of clamp().

3. Select the output unit

Select either rem or px under “Output Unit.”

If you select rem, enter the font-size applied to your project’s html element under “Root Font Size.” In most cases, you can use the default value of 16px.

The values at the minimum and maximum widths are converted to rem using the specified root font size.

4. Check the result in the preview

Select font-size or width under “Preview Type” to preview the generated value as text size or element width.

Enter a number under “Preview Width,” or use the 375, 390, 768, 1024, 1440, or 1920 quick-select buttons to switch to the screen width you want to check. You can also adjust it by dragging the handle on the right side of the preview.

The current font-size or width is shown at the top of the preview in px (rem) format.

Open “Advanced Settings” to change the preview text for font-size, or the preview element height for width. Line breaks entered in the text area are also reflected in the preview.

5. Copy the generated value

A clamp() value is generated automatically from your inputs. “Usage Example” displays CSS using the currently selected preview type as the property.

Use the “Copy” button to copy the generated value, then paste it into the CSS property where you want to use it.

To restore all settings to their initial values, use the “Reset” button.

What Is clamp()?

clamp() is a CSS function that takes a minimum value, a preferred value, and a maximum value, then keeps the result within that range. It is useful for smoothly changing text or element sizes according to the viewport width.

clamp(minimum, preferred, maximum)

Minimum: The smallest allowed value
Preferred: A value that changes according to the viewport width or another factor
Maximum: The largest allowed value

For example, the following declaration changes the font size within a range of 1rem to 2rem.

font-size: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);

The vw unit in the preferred value changes with the viewport width. If the calculated result is below the minimum, the minimum is used. If it exceeds the maximum, the maximum is used.

With this generator’s default settings, the preferred value is calculated to equal 16px at a viewport width of 375px and 32px at 1440px.

Properties that can use clamp()

clamp() can be used with many CSS properties that accept numeric or length values.

font-size: Text sizes that respond to the viewport width
width and max-width: Element or content widths
padding, margin, and gap: Spacing and gaps between elements
top, left, and similar properties: Element positioning

Unlike media queries, which switch values at specific breakpoints, clamp() can change a value continuously within the specified range.

FAQ

Which CSS properties can use the generated clamp() value?

In addition to font-size and width, it can be used with many properties that accept numeric or length values, such as padding, margin, and gap.
“Usage Example” reflects the currently selected preview type, but you can paste the generated value into other compatible properties as well.

What happens when the screen is narrower than the minimum viewport width?

The “Value at Minimum Viewport” is applied. Conversely, when the screen is wider than the maximum viewport width, the “Value at Maximum Viewport” is applied. The value changes smoothly only within the specified viewport range.

Can the value at the maximum width be smaller than the value at the minimum width?

Yes. You can generate a clamp() value that becomes smaller as the screen gets wider. Check the direction of the change and the result in the preview before using it.

What happens if the values at the minimum and maximum widths are the same?

The result is a fixed value that is not affected by changes in the viewport width.

What should I enter for the root font size?

Enter the font-size applied to your project’s html element. If you have not changed it, you can usually use the default value of 16px.

Do the Preview settings affect the generated code?

No. The settings under “Preview” only change how the preview is displayed and do not affect the generated clamp() value.

Why does the preview disappear when I enter a negative value?

Negative values cannot be applied to the visual font-size or width preview. The generated value itself may still be usable with CSS properties that accept negative values. Check the specification for the property where you plan to use it.

Does clamp() eliminate the need for media queries?

It can reduce the need for media queries when you want sizes or spacing to change smoothly. However, media queries are still better suited to changes that must happen at a specific width, such as switching the layout structure or toggling an element’s visibility.

Can the value change according to the width of a parent element?

The preferred value generated by this tool uses vw, so it changes according to the browser viewport width. To base the calculation on a parent element or container width, you need a different calculation using features such as container query units.

Settings

Preview

Generated Value