FLUID DESIGN TOOLS
RESPONSIVE CSS · JAVASCRIPT

Fluid Value Generator

Choose a CSS property and enter its values at two viewport widths to generate a fluid CSS declaration or JavaScript function.

Use a decimal point or comma. Opacity values must be between 0 and 1.

Live preview

Drag the slider to simulate a viewport width.

1200 px
Fluid design
320 px1980 px

width: 268.70 px

Fluid values for responsive interfaces

CSS properties such as width, height, and font-size can use a generated clamp() declaration to scale smoothly between two viewport widths and stay within the endpoint values.

For unitless values such as opacity, select the JavaScript option. Its function interpolates between the endpoint values and clamps the result outside the viewport range. Pass it a viewport width, such as window.innerWidth, then apply the returned value to your element and recalculate it on resize.