CSS clamp() Calculator

Enter a size for small and large screens and get a fluid clamp() value that scales smoothly in between — for font sizes, padding, margins or gaps.

Sizes
Minimum
Maximum
clamp() value
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

The result keeps a rem part in the middle term, so text still enlarges when someone zooms to 200% — a viewport-only value would not.

Preview

Fluid text, sized just right.

Adjust the sizes and screen widths to shape the value.

The calculation runs entirely in your browser. Nothing you enter here is uploaded to BroBroGo.

FAQ

How does the calculator build the clamp() value?

You give it two points: a size at a small screen width and a size at a large one. It draws a straight line between them so the size grows smoothly as the screen widens, then wraps it in clamp() so it never drops below your small-screen size or rises above your large-screen size. Between the two widths the size scales fluidly; outside them it holds at the nearest limit.

Why is the result in rem and vw instead of pixels?

The bounds are in rem and the changing middle part keeps a rem component, so text still grows when a reader zooms in or raises their browser’s default font size — a pixel- or viewport-only value can stop that from working. You type sizes in pixels because that’s how most people think about them, and the tool converts to rem using your root font size.

Can I use this for spacing, not just font size?

Yes. The same value works for padding, margin, gap, width or height — anywhere a length goes. Switch the preview to Box to watch the spacing grow instead of text. If your small and large sizes are the same, the result collapses to a plain fixed length, since there is nothing to scale.

Do all browsers support clamp()?

Yes — every current browser has supported clamp() since 2020, so you can ship the value as-is with no fallback. On a very large maximum or a fast rate of change, it is worth a quick check at 200% zoom that the text still enlarges for readers who need it.

Written and reviewed by the BroBroGo editorial team.Last updated:

Understanding CSS clamp() and Responsive Design

The CSS clamp() function is a powerful tool for modern web design, allowing developers to set a value that scales smoothly between a defined minimum and maximum across different screen widths. Traditionally, responsive design required writing multiple media queries to step-up font sizes or spacing at specific breakpoints. With clamp(), you can define a single fluid value that automatically adapts to the viewport.

This calculator simplifies the math required to generate these fluid values. By providing a size for a small screen and a size for a large screen, the tool calculates a mathematical function that ensures your layout elements scale fluidly in between, but never drop below your minimum size or rise above your maximum size. This approach can be applied to various length properties, including font sizes, padding, margins, gaps, width, or height.

How the Calculator Works

To generate the fluid CSS value, the calculator uses the following inputs to perform its calculations:

  • Minimum Size: The desired size at your small screen width.
  • Minimum Screen width: The viewport width of your small screen.
  • Maximum Size: The desired size at your large screen width.
  • Maximum Screen width: The viewport width of your large screen.
  • Root font size: The base pixel value used to convert your pixel inputs into rem.

The tool expects valid numbers in every input field. If any field is left empty or contains invalid data, the interface will display the error message "Enter a valid number in every field.".

The calculation relies on a linear interpolation between your two screen widths. Because of this, the small screen width must be a smaller positive number than the large screen width. If this rule is violated, the output clamp() value will display as — and the tool will show the error message "The small screen width must be a smaller positive number than the large one.".

Interpreting the Outputs and Status Messages

Once you enter valid inputs, the calculator generates several outputs to help you visualize and implement the fluid value:

  • clamp() value: The calculated CSS function, such as clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). The bounds of this value are output in rem, and the changing middle part keeps a rem component.
  • Preview: A live visual representation of the scaling. You can toggle this preview between "Text" (which displays the sample text "Fluid text, sized just right.") and "Box".
  • Preview width: A numerical display showing the current width of the preview area as you resize it.

As you adjust your inputs, the tool displays real-time status messages to describe the current scaling behavior:

  • "Adjust the sizes and screen widths to shape the value.": This is the default state guiding you to refine your inputs.
  • "Reverse scaling — the size shrinks as the screen grows.": This appears if your minimum size is set larger than your maximum size, causing the element to shrink as the viewport widens.
  • "Both sizes are equal, so this is a fixed value, not fluid.": If your small and large sizes are identical, the result collapses to a plain fixed length because there is no scaling to calculate.
  • "held at minimum": Indicates that the current preview width is at or below your small screen width, meaning the size is locked at the minimum limit.
  • "held at maximum": Indicates that the preview width is at or above your large screen width, locking the size at the maximum limit.
  • "scaling fluidly": Indicates that the preview width is currently between your minimum and maximum screen widths, meaning the size is actively scaling.

Accessibility and the Importance of rem Units

When building responsive layouts, accessibility is a critical consideration. A common mistake in fluid typography is using viewport units (vw) alone to scale text. If font sizes are calculated solely using viewport width, the text will not enlarge when a user zooms in or changes their browser's default font size, violating accessibility guidelines.

To prevent this issue, this calculator converts pixel inputs to rem using the provided root font size. The resulting clamp() value is designed to ensure text still grows when a reader zooms in or raises their browser's default font size. Because the changing middle term retains a rem component alongside the viewport unit, the text remains fully zoomable and accessible to users who rely on browser zoom or custom text sizes.

Privacy and Processing

Your data privacy is fully respected when using this tool. The calculation runs entirely in your browser, and nothing you enter is uploaded to BroBroGo. All processing happens locally on your device, ensuring your design configurations remain private.

Frequently Asked Questions

How does the calculator build the clamp() value?

You give it two points: a size at a small screen width and a size at a large one. It draws a straight line between them so the size grows smoothly as the screen widens, then wraps it in clamp() so it never drops below your small-screen size or rises above your large-screen size. Between the two widths the size scales fluidly; outside them it holds at the nearest limit.

Why is the result in rem and vw instead of pixels?

The bounds are in rem and the changing middle part keeps a rem component, so text still grows when a reader zooms in or raises their browser’s default font size — a pixel- or viewport-only value can stop that from working. You type sizes in pixels because that’s how most people think about them, and the tool converts to rem using your root font size.

Can I use this for spacing, not just font size?

Yes. The same value works for padding, margin, gap, width or height — anywhere a length goes. Switch the preview to Box to watch the spacing grow instead of text. If your small and large sizes are the same, the result collapses to a plain fixed length, since there is nothing to scale.

Do all browsers support clamp()?

Yes — every current browser has supported clamp() since 2020, so you can ship the value as-is with no fallback. On a very large maximum or a fast rate of change, it is worth a quick check at 200% zoom that the text still enlarges for readers who need it.

CSS Cubic Bezier GeneratorDrag the two handles to shape an easing curve, watch a dot ride it against a steady one, and copy the cubic-bezier() value.Box Shadow GeneratorDrag sliders to shape a box-shadow, stack layers for depth, and copy the finished CSS instantly.Gradient GeneratorBuild a linear, radial, or conic gradient, add color stops and set the direction, then copy the CSS in one click.Border Radius GeneratorRound each corner with sliders, shape organic blobs with the elliptical mode, and copy the CSS instantly.Flexbox GeneratorSet up a flex container and its items with visual controls, watch the layout react live, and copy the CSS in one click.CSS Grid GeneratorSet your columns and rows, drag across the cells to place items, and copy the grid CSS with matching HTML in one click.CSS Beautifier & MinifierReindent messy CSS to read it, or minify it to ship it — with a safe mode that never reorders your rules.px to rem & em ConverterConvert between px, rem and em using your own root and context font sizes — edit any field and the other two update as you type.