CSS & Layout
CSS Clamp Generator
Choose what you are sizing, set a minimum and a maximum, and copy a fluid
clamp() value. Sensible viewport bounds are chosen for you — open
Advanced to fine-tune them. Everything runs in your browser — your input never leaves the page.
Build your clamp()
live
Use a standard property such as padding, or a custom property
such as --space.
Generated CSS
liveLive result
simulated viewportFluid type scales smoothly with the viewport.
Advanced Viewport bounds, units, and formula options
Both viewport widths share the unit chosen above. Root font size converts rem values (defaults to 16px).
How the math works
A fluid value is a straight line between two points: at the minimum viewport the value
equals the minimum size, and at the maximum viewport it equals the maximum size. That
line is intercept + slope × vw, and wrapping it in
clamp(min, preferred, max) lets the browser cap the result at both ends.
The generator does the algebra so you can copy a declaration straight into your CSS.
Invalid input is reported inline instead of producing broken CSS.