How does CSS clamp() work?

clamp(MIN, VAL, MAX) returns VAL as long as it stays between MIN and MAX. Below MIN the browser uses MIN, above MAX it uses MAX. When VAL is a mix of rem and vw, such as 0.65rem + 1.74vw, the size grows linearly with the viewport between your two breakpoints and then stops, with no media queries needed.

Why use REM instead of PX inside clamp()?

rem values follow the user's browser font-size setting, while px values ignore it. Using rem for the minimum, maximum and the fixed part of the preferred value keeps text responsive to people who increase their default font size. This is the main reason this calculator converts pixels to rem using your root font size.

Can clamp() be used for padding and margins?

Yes. clamp() works anywhere CSS accepts a length: padding, margin, gap, width, height, border-radius and more. Use the property selector in the calculator and the reference table's spacing presets to build fluid spacing that grows with the layout, for example padding: clamp(1rem, 0.6rem + 1.7vw, 3rem).

How does clamp() affect accessibility and WCAG zoom?

WCAG 1.4.4 requires text to be resizable to 200% without loss of content. Because the rem part of the formula scales with the user's font settings and browser zoom changes the viewport width, clamp() with rem and vw generally passes. Avoid pure vw font sizes, and keep the maximum size at no more than about 2.5 times the minimum so zoomed text still scales properly.

How do I use clamp() for line-height?

Set the CSS property to line-height, enter the minimum and maximum line heights in px (for example 24px and 40px) and copy the result. A unitless line-height such as 1.5 already scales with the font size, so use a clamp() line height only when you want it to change at a different rate than the text, and keep body copy comfortably spaced, around 1.4 to 1.6.

How do I build a width clamp calculator value for width or max-width?

Choose width or max-width in the property selector, then enter the smallest and largest widths in px and your viewport range. The output grows with the screen between your two breakpoints and then stops, for example max-width: clamp(18.75rem, 6.5rem + 61vw, 75rem). Combine it with a normal max-width on the container if you also need a hard cap.

Is this the same as the Utopia clamp calculator?

Both generate fluid clamp() values from a minimum size, a maximum size and a viewport range. Utopia is built around complete type and spacing scales, while this CSS clamp generator focuses on one exact value at a time for any property, with rem or px output, a Tailwind config snippet, a live preview, 50 ready presets and no sign-up.

How to use clamp() inside Tailwind CSS?

Add the value to theme.extend.fontSize (or spacing) in tailwind.config.js, for example 'clamp-h1': 'clamp(1rem, 0.65rem + 1.74vw, 2rem)', then use the class text-clamp-h1. You can also use an arbitrary value without spaces, such as text-[clamp(1rem,0.65rem+1.74vw,2rem)]. In Tailwind v4, define it as a --text-* variable in an @theme block.

Css clamp calculator

CSS Clamp Calculator: Fluid Typography Generator

CSS clamp() Calculator & Fluid Typography Generator

Save on Google

Free online CSS clamp() calculator and clamp generator for fluid typography. Enter your viewport range and size range to get a ready-to-paste clamp() value for font size, line height, width, padding or gap. Everything runs in your browser. Nothing is stored or uploaded.

Quick presets

Min viewport width (px)

Max viewport width (px)

Min font / element size (px)

Max font / element size (px)

Root font size (px)

CSS property

Tailwind token name

Property type

Output unit

Generated CSS

Export

Min size (px / rem)

Max size (px / rem)

Slope

Y-axis intersection (px / rem)

Viewport unit

Live viewport preview

Simulated viewport: 768px

Text sampleClick to edit text

Fluid type scales smoothly with the viewport.

Computed font-size at 768px:

Viewport width	Computed size (px)	Computed size (rem)
320px (small phone)
480px (large phone)
768px (tablet)
1024px (laptop)
1280px (desktop)
1440px (large desktop)
1920px (full HD)

Share this preset

This link opens the calculator with your exact values. It updates every time you change an input.

https://www.thinkforu.org/p/css-clamp-calculator.html

Open Link

Share with developers

Related tools

Tool	What it does
PX to REM / EM Converter	Convert pixel values to rem and em.
CSS Glassmorphism Generator	Frosted-glass blur and transparency effects.
CSS Neumorphism (Soft UI) Generator	Soft extruded shadows for UI elements.
CSS Box Shadow & Glow Stacker	Layer multiple shadows and glows.
CSS Mesh & Multi-Gradient Generator	Build mesh and multi-stop gradients.
CSS Grid Layout Builder	Design grids visually and copy the CSS.

What is CSS clamp()?

clamp(MIN, VAL, MAX) is a CSS function that returns VAL while it stays between MIN and MAX. Below MIN the browser uses MIN, above MAX it uses MAX. When VAL mixes rem and vw (for example 0.65rem + 1.74vw), the size grows smoothly with the screen width between two breakpoints and then stops.

Why it beats media queries: text no longer jumps at each breakpoint, one declaration replaces several rules, and the whole scale lives in a single line. Browser support: Chrome and Edge 79+, Firefox 75+, Safari 13.1+, on desktop and mobile (all modern browsers).

CSS clamp text, line height and width: the same clamp generator works for font size, line height, width, max-width, padding, margin and gap. Pick the property in the calculator and copy the finished declaration. If you have used the Utopia clamp calculator for full type scales, this tool is the quick option when you need one exact clamp() value for a single font size, width or spacing token.

The math: slope = (maxSize - minSize) / (maxViewport - minViewport), intersection = -minViewport * slope + minSize, vw = slope * 100, rem = intersection / rootSize. Result: clamp(minRem, rem + vw, maxRem).

How to use this calculator

Start with a quick preset pill (H1 Hero, H2 Section, Body Text or Fluid Gap / Padding), or enter your own values.
Enter the smallest and largest screen widths where the size should scale (for example 320px and 1240px).
Enter the smallest and largest size you want, in pixels (for example 16px and 32px).
Set your root font size (16px by default, or 10px if your CSS uses the 62.5% trick).
Choose the property type (font-size or padding / gap), pick the exact CSS property and the output unit (REM or PX), then press Copy CSS. Use the Export tabs to copy a Tailwind config or a CSS variable.
Drag the viewport slider to check how the size changes. Use Copy Shareable Link to send the exact preset to a teammate.

What can you use clamp() for?

clamp() accepts any CSS length, so one calculator covers text, line height, width and spacing. Copy any example below, or choose the property in the tool above to build your own.

Use case	Property	Example range	Ready-to-use CSS
CSS clamp text	`font-size`	16px to 32px, 320 to 1240px viewport	`font-size: clamp(1rem, 0.6522rem + 1.7391vw, 2rem);`
CSS clamp line height	`line-height`	24px to 40px, 320 to 1240px viewport	`line-height: clamp(1.5rem, 1.1522rem + 1.7391vw, 2.5rem);`
Width clamp calculator	`width`	300px to 1200px, 320 to 1440px viewport	`width: clamp(18.75rem, 2.6786rem + 80.3571vw, 75rem);`
Fluid padding	`padding`	16px to 64px, 320 to 1440px viewport	`padding: clamp(1rem, 0.1429rem + 4.2857vw, 4rem);`
Fluid gap	`gap`	12px to 32px, 320 to 1440px viewport	`gap: clamp(0.75rem, 0.3929rem + 1.7857vw, 2rem);`
Fluid border radius	`border-radius`	6px to 16px, 320 to 1440px viewport	`border-radius: clamp(0.375rem, 0.1964rem + 0.8929vw, 1rem);`

50 fluid typography & spacing presets

Ready-to-use clamp() values for a 16px root. Mobile 320px, tablet 768px and desktop 1440px breakpoints. Click Copy beside any row.

#	Element	Min (px / rem)	Max (px / rem)	Viewport range	clamp() code
1	Typography: Hero Display (H1)	40px / 2.5rem	96px / 6rem	320–1440px	`clamp(2.5rem, 1.5rem + 5vw, 6rem)`
2	Typography: Hero Display XL	48px / 3rem	128px / 8rem	320–1440px	`clamp(3rem, 1.5714rem + 7.1429vw, 8rem)`
3	Typography: Page Title (H1)	32px / 2rem	64px / 4rem	320–1440px	`clamp(2rem, 1.4286rem + 2.8571vw, 4rem)`
4	Typography: H1 Compact	28px / 1.75rem	48px / 3rem	320–1440px	`clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem)`
5	Typography: Section Header (H2)	28px / 1.75rem	48px / 3rem	320–1440px	`clamp(1.75rem, 1.3929rem + 1.7857vw, 3rem)`
6	Typography: H2 Compact	24px / 1.5rem	40px / 2.5rem	320–1440px	`clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem)`
7	Typography: Subsection (H3)	22px / 1.375rem	32px / 2rem	320–1440px	`clamp(1.375rem, 1.1964rem + 0.8929vw, 2rem)`
8	Typography: H3 Compact	20px / 1.25rem	28px / 1.75rem	320–1440px	`clamp(1.25rem, 1.1071rem + 0.7143vw, 1.75rem)`
9	Typography: H4	18px / 1.125rem	24px / 1.5rem	320–1440px	`clamp(1.125rem, 1.0179rem + 0.5357vw, 1.5rem)`
10	Typography: H5	16px / 1rem	20px / 1.25rem	320–1440px	`clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem)`
11	Typography: H6	14px / 0.875rem	18px / 1.125rem	320–1440px	`clamp(0.875rem, 0.8036rem + 0.3571vw, 1.125rem)`
12	Typography: Subtitle / Lead	18px / 1.125rem	28px / 1.75rem	320–1440px	`clamp(1.125rem, 0.9464rem + 0.8929vw, 1.75rem)`
13	Typography: Subtitle Small	16px / 1rem	22px / 1.375rem	320–1440px	`clamp(1rem, 0.8929rem + 0.5357vw, 1.375rem)`
14	Typography: Body Large	17px / 1.0625rem	20px / 1.25rem	320–1440px	`clamp(1.0625rem, 1.0089rem + 0.2679vw, 1.25rem)`
15	Typography: Body Copy	16px / 1rem	18px / 1.125rem	320–1440px	`clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem)`
16	Typography: Body Compact	15px / 0.9375rem	17px / 1.0625rem	320–1440px	`clamp(0.9375rem, 0.9018rem + 0.1786vw, 1.0625rem)`
17	Typography: Small Text	13px / 0.8125rem	15px / 0.9375rem	320–1440px	`clamp(0.8125rem, 0.7768rem + 0.1786vw, 0.9375rem)`
18	Typography: Caption	12px / 0.75rem	14px / 0.875rem	320–1440px	`clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem)`
19	Typography: Microcopy	11px / 0.6875rem	13px / 0.8125rem	320–1440px	`clamp(0.6875rem, 0.6518rem + 0.1786vw, 0.8125rem)`
20	Typography: Button Label	14px / 0.875rem	18px / 1.125rem	320–1440px	`clamp(0.875rem, 0.8036rem + 0.3571vw, 1.125rem)`
21	Typography: Navigation Link	14px / 0.875rem	17px / 1.0625rem	320–1440px	`clamp(0.875rem, 0.8214rem + 0.2679vw, 1.0625rem)`
22	Typography: Blockquote	20px / 1.25rem	32px / 2rem	320–1440px	`clamp(1.25rem, 1.0357rem + 1.0714vw, 2rem)`
23	Typography: Code Text	13px / 0.8125rem	15px / 0.9375rem	320–1440px	`clamp(0.8125rem, 0.7768rem + 0.1786vw, 0.9375rem)`
24	Typography: H1 Mobile to Tablet	32px / 2rem	48px / 3rem	320–768px	`clamp(2rem, 1.2857rem + 3.5714vw, 3rem)`
25	Typography: H1 Tablet to Desktop	48px / 3rem	80px / 5rem	768–1440px	`clamp(3rem, 0.7143rem + 4.7619vw, 5rem)`
26	Typography: H2 Mobile to Tablet	24px / 1.5rem	32px / 2rem	320–768px	`clamp(1.5rem, 1.1429rem + 1.7857vw, 2rem)`
27	Typography: H2 Tablet to Desktop	32px / 2rem	48px / 3rem	768–1440px	`clamp(2rem, 0.8571rem + 2.381vw, 3rem)`
28	Typography: Body Mobile to Tablet	16px / 1rem	17px / 1.0625rem	320–768px	`clamp(1rem, 0.9554rem + 0.2232vw, 1.0625rem)`
29	Spacing: Grid Gap XS	4px / 0.25rem	8px / 0.5rem	320–1440px	`clamp(0.25rem, 0.1786rem + 0.3571vw, 0.5rem)`
30	Spacing: Grid Gap SM	8px / 0.5rem	16px / 1rem	320–1440px	`clamp(0.5rem, 0.3571rem + 0.7143vw, 1rem)`
31	Spacing: Grid Gap MD	16px / 1rem	32px / 2rem	320–1440px	`clamp(1rem, 0.7143rem + 1.4286vw, 2rem)`
32	Spacing: Grid Gap LG	24px / 1.5rem	48px / 3rem	320–1440px	`clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem)`
33	Spacing: Grid Gap XL	32px / 2rem	64px / 4rem	320–1440px	`clamp(2rem, 1.4286rem + 2.8571vw, 4rem)`
34	Spacing: Flex Gap SM	8px / 0.5rem	12px / 0.75rem	320–1440px	`clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)`
35	Spacing: Flex Gap MD	12px / 0.75rem	24px / 1.5rem	320–1440px	`clamp(0.75rem, 0.5357rem + 1.0714vw, 1.5rem)`
36	Spacing: Flex Gap LG	20px / 1.25rem	40px / 2.5rem	320–1440px	`clamp(1.25rem, 0.8929rem + 1.7857vw, 2.5rem)`
37	Spacing: Card Padding	16px / 1rem	32px / 2rem	320–1440px	`clamp(1rem, 0.7143rem + 1.4286vw, 2rem)`
38	Spacing: Container Padding SM	16px / 1rem	24px / 1.5rem	320–1440px	`clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)`
39	Spacing: Container Padding MD	20px / 1.25rem	48px / 3rem	320–1440px	`clamp(1.25rem, 0.75rem + 2.5vw, 3rem)`
40	Spacing: Container Padding LG	24px / 1.5rem	80px / 5rem	320–1440px	`clamp(1.5rem, 0.5rem + 5vw, 5rem)`
41	Spacing: Section Padding Y SM	32px / 2rem	64px / 4rem	320–1440px	`clamp(2rem, 1.4286rem + 2.8571vw, 4rem)`
42	Spacing: Section Padding Y MD	48px / 3rem	96px / 6rem	320–1440px	`clamp(3rem, 2.1429rem + 4.2857vw, 6rem)`
43	Spacing: Section Padding Y LG	64px / 4rem	128px / 8rem	320–1440px	`clamp(4rem, 2.8571rem + 5.7143vw, 8rem)`
44	Spacing: Margin Bottom XS	4px / 0.25rem	8px / 0.5rem	320–1440px	`clamp(0.25rem, 0.1786rem + 0.3571vw, 0.5rem)`
45	Spacing: Margin Bottom SM	8px / 0.5rem	16px / 1rem	320–1440px	`clamp(0.5rem, 0.3571rem + 0.7143vw, 1rem)`
46	Spacing: Margin Bottom MD	16px / 1rem	32px / 2rem	320–1440px	`clamp(1rem, 0.7143rem + 1.4286vw, 2rem)`
47	Spacing: Margin Bottom LG	24px / 1.5rem	48px / 3rem	320–1440px	`clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem)`
48	Spacing: Margin Bottom XL	32px / 2rem	64px / 4rem	320–1440px	`clamp(2rem, 1.4286rem + 2.8571vw, 4rem)`
49	Spacing: Margin Bottom 2XL	48px / 3rem	96px / 6rem	320–1440px	`clamp(3rem, 2.1429rem + 4.2857vw, 6rem)`
50	Spacing: Margin Bottom 3XL	64px / 4rem	128px / 8rem	320–1440px	`clamp(4rem, 2.8571rem + 5.7143vw, 8rem)`

Frequently asked questions

#	Question	Answer
1	How does CSS clamp() work?	clamp(MIN, VAL, MAX) returns VAL as long as it stays between MIN and MAX. Below MIN the browser uses MIN, above MAX it uses MAX. When VAL is a mix of rem and vw, such as 0.65rem + 1.74vw, the size grows linearly with the viewport between your two breakpoints and then stops, with no media queries needed.
2	Why use REM instead of PX inside clamp()?	rem values follow the user's browser font-size setting, while px values ignore it. Using rem for the minimum, maximum and the fixed part of the preferred value keeps text responsive to people who increase their default font size. This is the main reason this calculator converts pixels to rem using your root font size.
3	Can clamp() be used for padding and margins?	Yes. clamp() works anywhere CSS accepts a length: padding, margin, gap, width, height, border-radius and more. Use the property selector in the calculator and the reference table's spacing presets to build fluid spacing that grows with the layout, for example padding: clamp(1rem, 0.6rem + 1.7vw, 3rem).
4	How does clamp() affect accessibility and WCAG zoom?	WCAG 1.4.4 requires text to be resizable to 200% without loss of content. Because the rem part of the formula scales with the user's font settings and browser zoom changes the viewport width, clamp() with rem and vw generally passes. Avoid pure vw font sizes, and keep the maximum size at no more than about 2.5 times the minimum so zoomed text still scales properly.
5	How do I use clamp() for line-height?	Set the CSS property to line-height, enter the minimum and maximum line heights in px (for example 24px and 40px) and copy the result. A unitless line-height such as 1.5 already scales with the font size, so use a clamp() line height only when you want it to change at a different rate than the text, and keep body copy comfortably spaced, around 1.4 to 1.6.
6	How do I build a width clamp calculator value for width or max-width?	Choose width or max-width in the property selector, then enter the smallest and largest widths in px and your viewport range. The output grows with the screen between your two breakpoints and then stops, for example max-width: clamp(18.75rem, 6.5rem + 61vw, 75rem). Combine it with a normal max-width on the container if you also need a hard cap.
7	Is this the same as the Utopia clamp calculator?	Both generate fluid clamp() values from a minimum size, a maximum size and a viewport range. Utopia is built around complete type and spacing scales, while this CSS clamp generator focuses on one exact value at a time for any property, with rem or px output, a Tailwind config snippet, a live preview, 50 ready presets and no sign-up.
8	How to use clamp() inside Tailwind CSS?	Add the value to theme.extend.fontSize (or spacing) in tailwind.config.js, for example 'clamp-h1': 'clamp(1rem, 0.65rem + 1.74vw, 2rem)', then use the class text-clamp-h1. You can also use an arbitrary value without spaces, such as text-[clamp(1rem,0.65rem+1.74vw,2rem)]. In Tailwind v4, define it as a --text-* variable in an @theme block.