CSS clamp() Generator
Create a fluid CSS clamp() value that scales between a minimum and maximum size with the viewport width.
Size at common viewport widths
What is fluid typography?
In traditional responsive design, font sizes jump at breakpoints. With fluid typography, the size grows smoothly with the screen width. CSS clamp() makes this possible in a single line: clamp(minimum, preferred, maximum).
What the generator does
Enter the minimum size you want at the smallest viewport and the maximum at the largest. The tool calculates the vw and rem formula for the linear transition between them and outputs a ready clamp() declaration.
Uses
- Heading and body text sizes
- Margins and padding
- Spacing between components
It simplifies stylesheets full of media queries.
How to use CSS clamp() Generator
- Enter the minimum and maximum size.
- Set the minimum and maximum viewport widths.
- Preview the generated clamp() value.
- Copy the CSS.
Why use this tool?
Get fluid sizes that look balanced on every screen without the maths.
FAQ
Why use rem inside clamp()?
rem keeps the value tied to the user's font size preference, which is better for accessibility than fixed pixels.
Does clamp() work in all browsers?
Yes, every modern browser supports clamp().
What are typical values?
16–18px for body text and 32–56px for main headings between 360 and 1440px viewports is a common starting point.
Related tools
PX to REM and EM Converter
Convert pixels to rem and em (and back) based on your root and parent font sizes.
Open toolGolden Ratio Calculator
Divide a length by the golden ratio (φ ≈ 1.618) and build a φ-based scale for layout and typography.
Open toolCSS Gradient Generator
Design linear and radial CSS gradients with multiple colour stops and a live preview.
Open toolBox Shadow Generator
Create CSS box-shadow values with offset, blur, spread, colour and inset controls.
Open tool