Guides JP

CSS clamp() Generator

Enter min/max viewport widths and sizes to instantly generate clamp() for fluid typography, with rem conversion and a live preview.

Last updated: 2026/10/16 Design Feedback & bug reports

Settings

Output unit

rem is recommended for accessibility.

Presets

Output clamp()

clamp()
CSS example font-size: clamp();

Preview

1280px

Computed size: 24px

Fluid typography preview Fluid 123

How to Use

1

Enter sizes and widths

Enter the min/max sizes (px) and the min/max viewport widths you want to target.

2

Check the clamp()

The clamp() is calculated instantly as you type. Choose px or rem as the output unit.

3

Copy and use

Copy the clamp() and paste it into your CSS for font-size, padding, and more.

What is CSS clamp()?

clamp() is a CSS function that takes a minimum, preferred, and maximum value, smoothly scaling between them based on the viewport. Writing font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem) lets you build fluid typography without media queries. This tool computes the preferred value (slope and intercept) for you automatically.

Features

  • Real-time calculationThe clamp() is computed instantly as you type. No waiting for results.
  • rem conversionSwitch between px and rem based on your root font size for accessible output.
  • Live previewUse the viewport width simulator to see the computed size at any screen width.
  • Runs in your browserAll calculations run locally. Your input values are never sent to any server.

Use Cases

  • Responsive font-size for headings and body text
  • Fluid spacing for margins and padding between sections
  • Modern CSS with fewer media queries
  • Building a typography scale for a design system
  • Variable border-radius and gap for buttons and cards

FAQ

Is the CSS clamp() generator free to use?
Yes, it is completely free. No registration required—just open it in your browser and start using it.
Should I use px or rem?
rem is recommended for accessibility because it respects the user's browser font-size settings. This tool converts to rem based on your root font size (default 16px).
How is the preferred (middle) value calculated?
It finds the slope and intercept of the line through (min width, min size) and (max width, max size), then outputs "intercept + slope×100vw" as the preferred value.
Is my data sent to a server?
No. All calculations run locally in your browser with JavaScript. Your input values are never sent or stored externally.
Which browsers support clamp()?
clamp() is widely supported in modern browsers including Chrome, Edge, Firefox, and Safari. For older environments, add a fallback font-size declaration.
Can I use it for properties other than font-size?
Yes. It works for any length-based CSS property such as margin, padding, gap, border-radius, and width.

Related Tools

px to vw Converter Convert CSS px to vw. Bulk CSS conversion supported px to em/rem Converter Convert CSS px to em/rem. Bulk CSS conversion supported Aspect Ratio Calculator Calculate simplified aspect ratio from dimensions Line Height Calculator Calculate line-height ratio from font size and leading CSS Gradient Generator Visually create Linear, Radial & Conic CSS gradients

Popular Tools

Character Counter Count characters, words, and lines in real-time JSON Formatter Format and validate JSON with syntax highlighting QR Code Generator Create custom QR codes with logo, colors & styles Password Generator Generate secure random passwords with one click Base64 Encoder Encode and decode text or files to Base64 IP Address Checker Check your global IP address

Related Guides

Media Query Basics: How to Write @media, Breakpoints, and Mobile-First Learn media queries, the foundation of responsive design, from the ground up: how to write @media, the difference between min-width and max-width, how to choose breakpoints, the mobile-first approach, the viewport meta tag, and combining them with relative units and clamp.