CSS Clamp Generator

A clamp() generator that needs just two screen sizes

This CSS clamp() generator takes one size for a small screen and one for a large screen, and builds a clamp() expression that joins them smoothly. Say a body text should be 16px at a viewport width of 360px and 20px at 1280px: you get font-size: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);. Below 360px the text stays at 16px, above 1280px it stays at 20px, and in between it grows in proportion to the viewport width.

Drag the two dots on the size ramp chart above and the expression updates at once. Move the vertical cursor and you see how many px the value comes to at that viewport width. The preview on the right shows a scaled-down screen at that width and draws the value the browser itself computed as an actual-size sample. You can output rem or px, and base the formula on the viewport width (vw) or the container width (cqi). For font sizes, the zoom check tells you whether the text still reaches 2× when users zoom in, and the type scale builds a set of heading steps from a constant ratio.

Why join sizes with clamp()

When you change a size with a media query, the value jumps at the breakpoint you chose. A heading that is 16px at 767px suddenly becomes 28px at 768px. Devices just above and below that line tend to show text that looks too big or too small for the screen, and every extra breakpoint adds one more rule to maintain. clamp() draws a straight line between a minimum and a maximum, so one rule covers every width.

• Headings that should be small on phones and large on desktops: use it for text with a big size difference, such as a hero heading. If the maximum is more than 2.5× the minimum, be sure to read the zoom check (see "Zoom and accessibility" below).
• Spacing that breathes with the screen: the gap between cards or the space between sections can shrink on narrow screens and open up on wide ones.
• Text width and inner padding: let the width or padding of a text box grow with the screen and stop at the size you set.
• When the design has only two mockups: if you have values for the mobile and desktop mockups and nothing in between, enter both values and let the formula fill the gap.
• When a component sits in places of different widths: if the same card appears in a sidebar and in the main column, the card width is a better basis than the viewport width. Switch the basis to container (cqi).

How to use it

1. Click the closest example in the strip above, or type the viewport width and size for the small and large screens. Dragging the two dots on the chart changes the same fields.
2. Choose the property (font-size, gap, padding, width), the output unit (rem or px) and the basis (viewport vw or container cqi). For font sizes, rem output is the better choice.
3. Drag the vertical cursor on the chart or press a value in the screen width list to check the size on a phone, tablet, laptop and monitor. "Sweep the width" moves the sample as if you were stretching and shrinking the window.
4. For font sizes, use the zoom check to see whether the text reaches 2× within 500% zoom. If it does not, change the maximum or minimum as suggested.
5. Copy declaration gives you one line of CSS, Copy expression gives only the clamp() part, and Copy variables takes the whole type scale. Copy link stores the current settings in the address.

How it is calculated: slope, intercept, vw coefficient

The tool finds the straight line through two points, (small viewport width w₁, size s₁) and (large viewport width w₂, size s₂), and then rewrites that line in units CSS understands.

• Slope = (s₂ − s₁) ÷ (w₂ − w₁). This is how much the size changes for each 1px of viewport width.
• vw coefficient = slope × 100. Because 1vw is 1% of the viewport width, you multiply by 100 to get a vw value.
• Intercept = s₁ − slope × w₁. This is the value at a viewport width of 0, the fixed part of the expression. For rem output, divide it by the root font size (normally 16px).

For 16px at 360px and 20px at 1280px, the slope is 4 ÷ 920 = 0.004348, the vw coefficient is 0.4348vw, and the intercept is 16 − 0.004348 × 360 = 14.4348px = 0.9022rem. Put the minimum and maximum on either side and you get clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem). This is the value the expression gives at each viewport width.

The specification defines clamp(MIN, VAL, MAX) as equal to max(MIN, min(VAL, MAX)). So the moment the middle expression leaves the range, the outer value takes its place. The dotted line in the chart is the middle expression before it is cut, and the thick line is the value actually used. If you enter a large-screen size smaller than the small-screen size, the value shrinks as the screen gets wider, and this tool swaps the bounds so the smaller one comes first.

Common values

These are the expressions for the examples in the strip, calculated for 360px → 1280px with a root font size of 16px. Use them as a starting point and adjust them to your design.

px or rem: which output to use

A browser offers two ways to enlarge text. Page zoom (Ctrl or ⌘ and +) makes everything bigger, and it does so by shrinking the viewport width that CSS sees. The font size setting in the browser's preferences changes only the root font size, which is the basis of rem. A bound written in px ignores the font size setting, and the vw part stays the same in both cases. With the body example (16 → 20px, 360 → 1280px), the results are as follows.

With rem output, the font size setting enlarges the text by exactly the same ratio as page zoom. The bounds and the intercept both double, and only the vw part stays put. With px output, changing the setting does nothing, so a user who relies on a large font sees no change at all. A sensible rule is to use rem for font sizes and px for values that should not follow the setting, such as borders. If a site changes the root to 10px with html { font-size: 62.5%; }, enter 10 in the root font size field so the rem values come out right.

Viewport width (vw) or container width (cqi)

vw is based on the width of the browser viewport, so the value stays the same even if a card moves into a narrow sidebar on the same screen. The container unit cqi is 1% of the inner width (in horizontal writing, the width) of the nearest container. Give the parent container-type: inline-size; and switch this tool's basis to container: the horizontal axis of the chart becomes the container width, and cqi takes the place of vw in the expression.

• CSS Containment 3 says that when no suitable container is found, cqi is computed against the small viewport size. If you forget container-type on the parent, it behaves much like a viewport-based value, which makes the mistake hard to notice.
• According to CSS Values 4, viewport units are calculated as if there were no scrollbar (an exception is a case such as overflow: scroll, where a scrollbar is always present). In environments where the scrollbar takes up space, 100vw can be wider than the actual content area and cause horizontal overflow. For widths, cqi or % is safer.
• Container units are supported from Chrome 105, Firefox 110 and Safari 16 (see the browser support table below).

Zoom and accessibility: does it reach 2×?

Success Criterion 1.4.4 (Resize Text) in WCAG 2.2 says that text must be enlargeable up to 200% without assistive technology and without loss of content or function. W3C lists failure F94 separately for text sized only with viewport units, which does not grow when zoomed. When you zoom in, the CSS viewport width shrinks and the vw part gets smaller, so text built with clamp() grows less than the zoom factor.

Maxwell Barvian (Smashing Magazine, 2023) pointed out that modern browsers zoom up to 500% and summarized that if the maximum size is no more than 2.5× the minimum size, the text reaches 2× within 500% at any window width. Besides that rule, this tool calculates window widths from 320 to 3840px and finds the least favorable one. With a small screen of 360px and 16px, a large screen of 1280px, and only the maximum size changing, the results are as follows.

Looking only at 200% zoom, even the body example with a max ÷ min of 1.25 gets just 1.72× in a 1280px window. To reach 2× at that width you would have to zoom to 239%. If you need to pass a check that demands exactly 2× at 200% zoom, shrink the vw part further, or keep font sizes in plain rem and use clamp() only for gaps and padding. With a steep slope like the 64px row, there are even window widths where the text gets smaller at 200% zoom.

Type scale: build heading steps from one ratio

A type scale builds heading steps by multiplying the body size by a constant ratio again and again. Utopia (James Gilyead and Trys Mudford, 2020) introduced a method with different ratios for the small and large screens, joining each step with clamp(). A bigger ratio on the large screen widens the gaps between heading steps on wide screens, while the steps stay tight on narrow ones. This tool treats the value built above as step 0 and creates CSS variables such as --step-1 and --step--1.

The bigger the gap between the small-screen ratio and the large-screen ratio, the faster the max ÷ min of the upper steps grows. For a body of 16 → 20px with 1.2 and 1.25, step 5 is 39.81 → 61.04px, a ratio of 1.53 that stays within the zoom criterion. With 1.2 and 1.5, step 5 becomes 39.81 → 151.88px, a ratio of 3.8, which goes over it. The marker to the right of the step list is the zoom check recalculated for each step.

Browser support

MDN classifies clamp() as Baseline Widely available, meaning it has worked across the major browsers since July 2020. The CSS Values 4 draft also defines a syntax that puts none in the minimum or maximum slot, but MDN's compatibility data has no support entry for it yet, so this tool does not use it.

Common mistakes

• Forgetting to multiply the vw coefficient by 100: writing the slope 0.004348 as 0.004348vw shrinks the change to a hundredth, and the value is almost fixed.
• Thinking calc() must wrap the expression: the three slots of clamp() already accept addition and subtraction, so clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem) is enough. Wrapping it in calc() gives the same result.
• Pasting a rem expression into a site with a different root size: on a site whose root is 10px, 1rem is 10px. Change the root font size field to that site's value and generate the expression again.
• Swapping the minimum and maximum: when the minimum is larger than the maximum, clamp() uses the minimum. If you swap the two values while editing by hand, the result is stuck at one value for every width.
• Sizing text with vw alone: font-size: 5vw does not grow when zoomed, which is WCAG failure F94. Switch to clamp() with a rem intercept and look at the zoom check.
• Using 100vw for a width: where the scrollbar takes up space, it causes horizontal scrolling. For the maximum or middle expression of a width, consider % or cqi.
• Fixing line height in px: only the text grows and the line height stays put, so the lines overlap. Use a unitless value such as line-height: 1.5.

Limits and cautions

• It builds only one straight line through two points. To change the slope in several ranges, you need several clamp() rules combined with media queries or container queries.
• The zoom check calculates the way Chrome and Firefox behave, where zooming in shrinks the CSS viewport width by the zoom factor. The Smashing Magazine article also notes that Safari may zoom differently. Make the final call by zooming the actual page.
• The font size setting calculation assumes the font size on html is left unset or given in % or rem. On a site that fixes the html font size in px, rem does not follow the setting either.
• When you choose the container basis, the whole preview screen is treated as the container. The value changes with the padding and border of the real container.
• Numbers in the expression are rounded to four decimal places. Even on a 1920px screen the difference is less than 0.01px.
• The preview uses this device's default font. If the browser's minimum font size setting is on, a small value can be raised up to that size.

Reference date W3C CSS Values and Units Level 4 (Working Draft 2024-03-12), CSS Containment Level 3 (Working Draft 2022-08-18), WCAG 2.2 Understanding 1.4.4 and F94, and MDN compatibility data (browser-compat-data 8.1.6, 2026-10-15) were checked against the originals on 2026-10-21. The numbers in the tables were obtained with this tool's calculation core.

Sources

• 01W3C: CSS Values and Units Module Level 4Working Draft 2024-03-12. clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX)); when the minimum collides with the maximum, the minimum wins; viewport units are calculated as if there were no scrollbar
• 02MDN: clamp()Baseline Widely available (July 2020), accessibility note, browser compatibility Chrome 79, Firefox 75, Safari 13.1
• 03W3C: CSS Containment Module Level 3Working Draft 2022-08-18. §6 container units cqw, cqh, cqi, cqb; with no suitable container, the small viewport size is the basis
• 04MDN: Using container size and style queriesHow to use container-type and container units; compatibility data for container units: Chrome 105, Firefox 110, Safari 16
• 05W3C WAI: Understanding Success Criterion 1.4.4 Resize TextText must be enlargeable up to 200% without assistive technology (AA)
• 06W3C WAI: F94 Failure due to incorrect use of viewport units to resize textText sized with viewport units alone does not grow with zoom or the font size setting
• 07Smashing Magazine: Addressing Accessibility Concerns With Using Fluid TypeMaxwell Barvian, 2023-11-07. The 500% zoom basis; passes when the maximum size is at most the minimum size × 2.5
• 08Utopia: Designing with fluid type scalesJames Gilyead, 2020-02-01. A fluid type scale with different ratios for the small and large screens

Frequently asked questions

Related tools