CSS Clamp Generator

Generate responsive CSS clamp values for fonts, spacing and other fluid properties.

Clamp Settings

Create fluid CSS values

Define the minimum, maximum and viewport range for your responsive CSS value.

CSS Property

Output Unit

Minimum Value

Maximum Value

Min Viewport

Max Viewport

Quick Presets

Common uses

Clamp Result

Preview the responsive value and copy the generated clamp CSS.

Clamp Value

clamp(24px, 16px + 2.2222vw, 48px)

Preview Viewport

Test how the value changes.

768px

360px1440px

Responsive Text

33.07px

Current Value

768px

Viewport

CSS Code

font-size: clamp(24px, 16px + 2.2222vw, 48px);

Generated Values

24px

Min

48px

Max

2.2222vw

VW Rate

16px

Intercept

Choose the smallest and largest value you want the CSS property to use.

Define the viewport widths where the responsive value should scale.

Copy the generated clamp() value and use it directly in your stylesheet.