Fluid typography
Use clamp for headings and body text that scale smoothly between phones and desktops without several media queries.
Fluid CSS Generator
Free CSS Clamp Calculator
CSS clamp() creates a responsive value with a minimum, preferred fluid value, and maximum. This calculator turns your size and viewport limits into copy-ready CSS for fluid typography, spacing, padding, and layout gaps.
Generated CSS
font-size: clamp(1rem, 3.3333vw + 0.3333rem, 3rem);Preferred value: 3.3333vw + 0.3333rem
Copy-ready clamp CSS
The value scales from 1rem at 320px to 3rem at 1280px.
Clamp value
clamp(1rem, 3.3333vw + 0.3333rem, 3rem)CSS declaration
font-size: clamp(1rem, 3.3333vw + 0.3333rem, 3rem);Minimum
1rem
Preferred
3.3333vw + 0.3333rem
Maximum
3rem
Formula breakdown
- Slope
- 0.033333
- Viewport coefficient
- 3.3333vw
- Intercept
- 0.3333rem
- Viewport range
- 320px - 1280px
Live preview
Scale this text or spacing with CSS clamp().
AB
Responsive spacing
Apply the same formula to padding, margin, section gaps, and card spacing so layouts breathe at every viewport size.
Readable CSS
The generated output keeps the minimum, preferred value, and maximum visible so your team can review the responsive range.
CSS clamp FAQ
Short answers for developers learning when and how to use fluid CSS values.
What does CSS clamp() do?
CSS clamp() sets a value that can grow and shrink between a minimum and maximum. It is commonly used for responsive font sizes, spacing, padding, and gaps.
How is a fluid typography clamp value calculated?
A fluid typography clamp value uses a fixed minimum size, a fixed maximum size, and a preferred value based on viewport width. The preferred value is calculated from the slope between your minimum and maximum viewport widths.
Should I use rem or px in CSS clamp?
Use rem for text when you want to respect browser font-size preferences. Pixels are fine for spacing systems, but rem can make spacing scale better with user settings.
Can clamp() replace media queries?
Clamp can replace many simple responsive size media queries. You may still need media queries for layout changes, visibility rules, or complex component behavior.
Does CSS clamp work in modern browsers?
Yes. CSS clamp is supported by modern Chrome, Safari, Firefox, and Edge, making it safe for most current responsive web projects.
Keep exploring with more CSS tools
Pair fluid sizing with layout, color, and animation tools from Zap Code.
Ready for kids to build real web projects?
Zap Code helps kids describe apps, games, and tools in plain English, then learn from real HTML, CSS, and JavaScript.