clamp(min, preferred, max) picks preferred when it’s between min and max — otherwise it uses the nearer bound. It’s ideal for fluid type and spacing without media queries.

What’s Fluid mode vs Simple mode?

Fluid mode interpolates size between two viewport widths and builds preferred as a vw + offset expression. Simple mode lets you set min, preferred, and max units manually (px, rem, vw, %…).

Can I export a CSS variable?

Yes. Enable Export as CSS variable to emit :root { --fluid-size: clamp(...); } and use var(--fluid-size) on your class.

What is an HTML color code?

An HTML color code is a way to specify colors in web pages using HEX (#RRGGBB), RGB, HSL, or named CSS colors. HEX is the most common format in CSS and HTML.

How do I convert HEX to RGB?

Use our HEX to RGB converter. Paste a HEX value like #FF5733 and get rgb(255, 87, 51). You can also convert RGB back to HEX with the RGB to HEX tool.

CSS Tools All menus →

CSS Clamp Generator

Build professional fluid CSS clamp() values with viewport interpolation, property presets, live size chart, and IDE-ready output including CSS variables.

Workspace

CSS Clamp

Fluid min / preferred / max with live viewport simulation.

Live

Typography Buttons

Presets

Mode

Interpolates size between two viewport widths — preferred is computed as vw + offset.

Property

Fluid range

Min size · 32px

Max size · 72px

Viewport min · 320px

Viewport max · 1280px

Output

Class name

Export as CSS variable

Sample text

Extra CSS

Preview

Viewport simulator

clamp(32px, 4.1667vw + 18.6667px, 72px)

Simulated viewport

768px

Computed ≈

50.7px

28076812801600

Size across viewports

Fluid headline

Min

32px

Preferred

4.1667vw + 18.6667px

Max

72px

Copy · Download

CSS outputcss | clamp.css

123.fluid {
  font-size: clamp(32px, 4.1667vw + 18.6667px, 72px);
}

64 characters | 3 linesIDE view - syntax highlighted

Keep exploring

Browse all →

CSS Tools

Typography Generator

Design professional typography with font presets, size/weight/leading/tracking, alignment, specimens, and IDE-ready CSS with optional variables.

Open tool

CSS Tools

CSS Button Generator

Design CSS buttons with solid, outline, soft, gradient, neon, 3D, and more presets — plus fonts, typography, icons, hover/focus/disabled states, and export-ready CSS.

Open tool

Answers

Frequently Asked Questions

Click a question to open it. Click again to close.

Looking for more? Browse Our Tools.

CSS Clamp

Related tools

Typography Generator

CSS Button Generator

Frequently Asked Questions

01What is CSS clamp()?

02What’s Fluid mode vs Simple mode?

03Can I export a CSS variable?

04What is an HTML color code?

05How do I convert HEX to RGB?

CSS Clamp

Related tools

Typography Generator

CSS Button Generator

Frequently Asked Questions

01What is CSS clamp()?

02What’s Fluid mode vs Simple mode?

03Can I export a CSS variable?

04What is an HTML color code?

05How do I convert HEX to RGB?