Skip to main content
DevStackKit
All tools

CSS clamp() Generator

Generate a CSS clamp() value for fluid font sizes and spacing between two screen widths, with a live preview and px or rem output. Free and private.

More options

CSS

Preview

The quick brown fox jumps over the lazy dog.

At 800px wide the size is 19.83px (1.239rem).

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Next steps

Done here? Use the Send to… menu on the result to carry it on to px to rem Converter.

Free Online CSS clamp() Generator for Fluid Typography

Make text and spacing that scale smoothly from a small size on phones to a large size on desktops. Choose the two sizes and the two screen widths, and copy the clamp() value. It gives developers a quick browser-based way to solve a focused css clamp() generator task before moving the result into a project.

How to make a fluid size

Set the smallest and largest size and the screen widths where each applies. The clamp() value and a live preview update at once. Copy the result into your CSS, for example font-size: clamp(…).

Testing the result

Move the screen width slider under the preview to see the size at that width.

Common mistakes

  • Setting the minimum width larger than the maximum width: the formula then makes no sense and the tool asks you to swap them.
  • Using only vw units: text stops responding to the reader's zoom. The rem part keeps it accessible.

Frequently asked questions

What does clamp() do?
clamp(min, preferred, max) keeps a value between a smallest and a largest size, and in between it follows the preferred value, which here grows with the width of the screen. Text scales smoothly without breakpoints.
Why is the middle value rem plus vw?
A pure vw value ignores the reader's font-size setting. Adding a rem part keeps the text responsive to zoom and accessibility settings.
Which widths should I use?
Use the narrowest phone you design for (320 or 360) and the width where the design stops growing (1200 to 1440). The size is the minimum below the first and the maximum above the second.
Does it work everywhere?
clamp() is supported in all modern browsers.
How do I use this css clamp() generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Frontend & Design

User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back

View all Frontend & Design tools →