Build a fluid clamp() value that scales smoothly between two viewport widths. Set min and max sizes and breakpoints, then copy the CSS.
clamp(min, preferred, max) scales a value smoothly with the viewport between your two breakpoints, then locks at the min below and the max above. Sizes are output in rem (assuming a 16px root) for accessibility. The preview uses the generated clamp, so it responds to your real window width.
clamp() lets one value scale fluidly between a minimum and maximum instead of jumping at breakpoints. It is ideal for fluid typography (font sizes that grow with the screen) and for responsive spacing like padding and gaps.
rem units respect the user's browser font-size setting, which is better for accessibility than fixed pixels. The tool converts your pixel inputs to rem assuming the usual 16px root size.
Below the minimum viewport the size stays at your minimum, above the maximum viewport it stays at your maximum, and in between it scales linearly. Common breakpoints are 320px for small phones and 1280px or 1440px for large screens.