CalculateY CalculateY

CSS Clamp Calculator

The CSS clamp() function creates fluid responsive values using the formula clamp(min, preferred, max), where the preferred value combines a viewport-width slope with a rem intercept. Enter minimum and maximum sizes with viewport breakpoints to generate a ready-to-use clamp() declaration.

Quick Answer

For text scaling from 16px (at 320px viewport) to 24px (at 1200px viewport) with a 16px root, the CSS clamp value is clamp(1rem, 0.0909vw + 0.8182rem, 1.5rem).

Common Examples

Input Result
16px to 24px, 320px to 1200px viewport clamp(1rem, 0.0909vw + 0.8182rem, 1.5rem)
14px to 18px, 375px to 1440px viewport clamp(0.875rem, 0.3756vw + 0.7871rem, 1.125rem)
20px to 40px, 320px to 1200px viewport clamp(1.25rem, 2.2727vw + 0.7955rem, 2.5rem)
12px to 16px, 320px to 768px viewport clamp(0.75rem, 0.8929vw + 0.5714rem, 1rem)

How It Works

The CSS clamp() function creates fluid values that scale between a minimum and maximum:

clamp(min, preferred, max)

The preferred value is calculated using a linear interpolation formula:

slope = (maxSize − minSize) / (maxViewport − minViewport)

intercept = minSize − slope × minViewport

preferred = (slope × 100)vw + intercept (in rem)

Where:

  • Values are converted from px to rem using the root font size
  • The preferred value uses vw units to scale with viewport width
  • The min and max act as guardrails, preventing the value from going below or above the specified limits

Worked Example

For text that scales from 16px at a 320px viewport to 24px at a 1200px viewport (root font size 16px): Slope = (24 - 16) / (1200 - 320) = 8 / 880 ≈ 0.009091. In vw: 0.009091 × 100 = 0.9091vw. Intercept = 16 - (0.009091 × 320) = 16 - 2.909 = 13.091px = 0.8182rem. Min = 16/16 = 1rem, Max = 24/16 = 1.5rem. Result: clamp(1rem, 0.9091vw + 0.8182rem, 1.5rem).

Related Calculators

Flexbox Gap Calculator

Calculate item widths for flexbox layouts given container width, number of items, and gap size.

Frequently Asked Questions

What is CSS clamp()?
CSS clamp() is a function that constrains a value between a minimum and maximum, with a preferred value that scales fluidly. It's commonly used for responsive typography, allowing font sizes to smoothly scale between mobile and desktop without media queries.
Why use rem instead of px?
rem units respect the user's browser font size preferences, improving accessibility. If a user increases their default font size, rem-based values scale accordingly, while px values do not.
What viewport widths should I use?
Common choices are 375px (iPhone) for the minimum and 1440px (standard desktop) for the maximum. These represent the range of screen sizes where you want the value to scale. Below 375px, the minimum applies; above 1440px, the maximum applies.
Can I use clamp() for things other than font sizes?
Yes. clamp() works with any CSS property that accepts length values, including padding, margin, gap, and width. It's especially useful for spacing that should scale proportionally with the viewport.