CSS Clamp Calculator

Generate responsive CSS clamp() functions for layouts.

Parameters

Define target sizes, viewport boundaries, and base settings.

Quick Presets

Viewports:

Sizes:

Min SizeAt min viewport

Max SizeAt max viewport

Min Viewport WidthLower boundary

Max Viewport WidthUpper boundary

Base Font Size

Output Unit

CSS Property

Generated Outputs

Copy the generated responsive values into your styles.

Clamp Function

clamp(1rem, 0.6364rem + 1.8182vw, 2rem)

Full CSS Rule

font-size: clamp(1rem, 0.6364rem + 1.8182vw, 2rem);

Tailwind Class

text-[clamp(1rem,0.6364rem+1.8182vw,2rem)]

SCSS / Sass

$font-size-fluid: clamp(1rem, 0.6364rem + 1.8182vw, 2rem);

Visualizer Graph

Linear sizing graph. Click on the graph to slide the simulated viewport width.

Interactive Simulator

Drag the slider to test the fluid properties at different screen widths.

Simulated Screen Width

800px

Mobile (200px)Tablet (768px)Desktop (1200px)Wide (2000px)

Computed preview size:24.73px / 1.545rem

Fluid Typography