USEFUL TOOLS. LESS HASSLE.Fluid Between Two Sizes
The size scales linearly between your minimum and maximum viewport widths.
DESIGN TOOL / CSS
Free CSS Clamp Generator
Generate CSS clamp() values for fluid typography and spacing. Set a minimum and maximum size and the viewport range, and get a value that scales smoothly with no media queries.
Output in rem or px, with a live viewport slider that shows exactly what size you get at any width.
✓ Free to use · No signup required · Processed in your browser
CSS Clamp Generator workspace
SET MIN AND MAX SIZES · SET THE VIEWPORT RANGE · COPY CLAMP()
The quick brown fox
Set your minimum and maximum size and the viewport range.
CLAMP WORKSPACEMOSANKIT / DESIGN & COLOR
THE BASICS
What Is CSS clamp()?
The CSS clamp() function sets a value that grows and shrinks with the screen but never goes below a minimum or above a maximum: clamp(minimum, preferred, maximum). It lets text and spacing scale fluidly between a phone and a desktop without a pile of media queries.
The tricky part is the middle value — a mix of a fixed size and a viewport width unit. This generator calculates it for you from the sizes and screen widths you choose.
BUILT FOR THE JOB
Key Features of MoSanKit CSS Clamp Generator
rem or px
Enter sizes in px or rem, and output whichever your project uses.
Any Property
Works for font-size, padding, margin, gap, width and more.
Viewport Simulator
Drag a slider to see the exact size at any screen width.
Sensible Checks
Warns about equal sizes, reversed ranges and invalid widths.
Private by Design
Everything runs in your browser.
QUICK AND SIMPLE
How to Generate a clamp() Value
01 / SIZES
Enter min and max sizes
For example 16px to 32px.
02 / RANGE
Set the viewport range
The screen widths the scaling should cover.
03 / TEST
Try the slider
See the size at different widths.
04 / COPY
Copy the CSS
Paste it into your stylesheet.
MADE FOR EVERYDAY WORK
Who Can Use This Tool?
Front-end DevelopersReplace stacks of media queries.
Web DesignersSpecify fluid type scales.
Design System TeamsCreate consistent fluid tokens.
Accessibility AdvocatesKeep type responsive and readable.
StudentsLearn how fluid sizing works.
AgenciesSpeed up responsive builds.
GOOD TO KNOW
A few things, answered.
Quick answers about using the MoSanKit CSS Clamp Generator.
clamp(min, preferred, max) returns the preferred value, but never less than min or more than max. The preferred value here is a fixed size plus a vw amount, which makes it scale with the viewport.
rem values respect the user's browser font-size setting, which is better for accessibility. The generator converts using the root font size you enter (16px by default).
Common choices are about 320px (small phones) to 1200px–1440px (desktop). Outside that range the size stays at the minimum or maximum.
Yes. Change the CSS property to padding, margin, gap or any length property.
clamp() is supported in all modern browsers.
No. The value is calculated in your browser.
Fluid sizes,
no media queries.
Explore more free design and color tools from MoSanKit.