CSS reference
Clamp Builder
Pick a responsive sizing pattern or generate your own:
This is the Fluid typography clamp.
Generate a clamp() expression that scales text between a mobile and desktop size.
Use this when headings should grow smoothly without adding multiple breakpoint rules.
A good type clamp has a readable mobile minimum, a restrained desktop maximum, and viewport limits that match your layout.
Working example
font-size: clamp(2rem, 1.333rem + 2.963vw, 4rem);Production note: Do not scale body text aggressively. Keep paragraphs stable and readable.
Before adding the clamp value
- Set the minimum and maximum from real design needs, not random viewport math.
- Preview the value at mobile, tablet, small laptop, and wide desktop widths.
- Keep body copy stable; use fluid scaling mostly for headings, spacing, and layout primitives.
Common mistakes
- Making text too small on mobile because the minimum value was chosen visually on desktop.
- Generating unique clamp values for every component instead of using a small token set.
- Trying to fix a cramped grid with smaller gaps when the layout needs fewer columns.
Direct answer
A practical CSS clamp reference and calculator for fluid typography, section spacing, grid gaps, and responsive layout scales.
What this tool solves
Choose a fluid value for typography, spacing, or layout without stacking breakpoint overrides.
Input and output
- Input: A target use case or common clamp pattern
- Output: A reusable clamp value with implementation guidance and failure notes
- Privacy: Runs entirely in the browser
Best used for
- Fluid headings that should scale between mobile and desktop without multiple media queries.
- Section spacing, grid gaps, and layout tokens that need a controlled responsive range.
- Design-system tokens where the minimum, preferred value, and maximum should be documented.
Do not use it blindly when
- Body copy becomes too small on mobile or too large on desktop.
- The layout problem is actually a column-count issue, not a spacing formula issue.
Pre-publish checklist
- Set readable mobile and desktop bounds before calculating the middle value.
- Test generated values around 390px, 768px, 1024px, 1366px, and 1440px.
- Use a small set of clamp tokens instead of generating a unique value for every component.
Example searches
Useful starting inputs include: Fluid H1, Section padding, Card gaps, Icon size.
Production use
Use the result as a decision aid, then verify it in the real product context. Browser support, API contracts, validation behavior, timezones, accessibility, monitoring, and handoff documentation can still change the right implementation.