Parameters
Generated CSS
SCSS Function
Parameters in px, returns clamp in rem + vw
Usage with current values
How the Clamp Generator Works
Generate fluid CSS clamp() values for responsive typography and spacing. Set viewport breakpoints and size range, get instant output.
Fluid Typography
Generate font-size values that scale smoothly between a minimum and maximum as the viewport changes. No breakpoints, no media queries — just one CSS clamp() value.
Viewport Breakpoints
Set the viewport range where scaling happens. Below the minimum, the font stays at its smallest size. Above the maximum, it stays at its largest. In between, it scales linearly.
Precise Control
Enter exact pixel or rem values for minimum and maximum font size. The tool calculates the preferred value using a linear equation that maps viewport width to font size.
Copy & Use
Copy the generated clamp() value as CSS or SCSS. The output is a single line you can paste into any font-size, padding, margin, or gap property.
Frequently Asked Questions
clamp(min, preferred, max) is a CSS function that constrains a value between a minimum and maximum. The preferred value — usually viewport-relative — scales freely within those bounds. It is most commonly used for fluid typography.
Media queries create abrupt jumps between sizes at specific breakpoints. clamp() provides a continuous, smooth scale. It reduces CSS complexity and produces more natural responsive behavior.
Yes. clamp() works on any CSS property that accepts a length — padding, margin, gap, width, and more. Fluid spacing creates more harmonious layouts that adapt naturally to screen size.
The preferred value uses a formula like calc(Xrem + Yvw) where X is the base and Y is the rate of change. This tool computes both values from your inputs so the font size scales linearly between the min and max viewport widths you set.