FREE WEB TOOL

CSS clamp() generator

Generate a fluid CSS clamp() expression from viewport and size ranges.

Use tool

Minimum (px)Maximum (px)Minimum viewport (px)Maximum viewport (px)

How to use it

Generate a CSS clamp() expression from minimum/maximum pixel sizes and the viewport widths where those sizes should apply. It is useful as a starting point for fluid type or spacing.

Enter the minimum and maximum pixel sizes.
Enter the minimum and maximum viewport widths that correspond to them.
Copy the generated clamp() into CSS and test it at real breakpoints.

Sizes: Zero or greater; maximum must be at least minimum
Viewport: Positive; maximum viewport must be greater than minimum viewport
Middle value: Linear interpolation by viewport width
Output units: px + vw

Scale 16→32 px across 375→1440 px

The generated expression is designed to equal 16 px at a 375 px viewport, reach 32 px at 1440 px, and change linearly in between.

The formula only connects the two numeric design points. It does not decide readable typography, accessibility, zoom behavior or whether your design system should use fixed steps instead.

Below the minimum viewport, the minimum size wins

The first argument of clamp() keeps the value from shrinking below the chosen minimum.

Above the maximum viewport, the maximum size wins

The third argument caps growth so the value does not continue increasing indefinitely on very wide screens.

Maximum size must not be below minimum size

This generator is aimed at equal-or-growing fluid values from narrow to wide viewports. Reverse scaling is outside this simplified UI.

Test representative viewport widths

Check narrow mobile, tablet, laptop and wide desktop widths to confirm wrapping and spacing still look intentional.

Pixel output may not match a rem-based system

The generated expression uses px and vw. If your accessibility or design-system strategy depends on rem, adapt the formula to that unit policy.

Related references: HTTP status codes · MIME types · Regex cheat sheet