UUUP Tools

Design Tools

CSS Clamp Generator — Fluid Responsive Sizes

From min/max viewport widths and a target size range, compute a clamp() formula for fluid font sizes, spacing, and other lengths that scale with the viewport.

Quick switch→CSS Unit Converter
CSSclampResponsive
Quick switch:CSS Unit ConverterPixel Ruler

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

  • Generate body type that scales with the viewport
  • Set min/max rem ranges for headings
  • Replace some media-query spacing with clamp

How to use

  1. Set minimum and maximum viewport widths
  2. Set matching min/max sizes (rem) and the root font size
  3. Copy the clamp() formula

Example input and output

Conditions

Viewport 320–1200px, size 1–2.5rem, root 16px

CSS

clamp(1rem, 0.45rem + 2.72vw, 2.5rem)

FAQ

How is the formula calculated?

Across the given viewport range, a linear slope maps size from min to max, then clamp(min, preferred, max) caps the ends.

Is it only for font sizes?

No. Any length you express in rem ranges works—font size, spacing, width, and similar.

Tools

Related tools

Continue with another translated tool for a nearby task.

CSS Unit Converter

CSS Unit Converter — px, rem, em, vw

Available

Convert among px, rem, em, pt, vw, vh, and %. Customize root font size, parent font size, and viewport size for responsive work and design-to-code handoff.

CSS Units Conversion
Open tool

Pixel Ruler

Pixel Ruler — Screen Size and Tick Marks

Available

Draw a horizontal or vertical pixel ruler on the page. Adjust length and tick spacing, and view window size plus device pixel ratio to check CSS pixel measurements against layouts and mockups.

Pixels Ruler Measure
Open tool