CSS Clamp Generator
Generate fluid clamp values for responsive typography and spacing.
Clamp inputs
Set the min and max sizes plus the viewport range you want to scale across.
Clamp output
Paste this into font-size, gap, width, or other responsive CSS properties.
Common use cases
- Creating fluid type scales
- Making spacing responsive without many media queries
- Testing size ranges for component design systems
FAQ
Is this only for font sizes?
No. Clamp values are useful for spacing, widths, gaps, and other responsive properties too.
Do I need to calculate the formula by hand?
No. The tool handles the slope and intercept so you can focus on the size range you want.
How it works
Set your min and max sizes and generate a CSS clamp expression that scales smoothly across viewport ranges. The result is produced immediately so you can review it before copying or using it elsewhere.
Privacy
The tool is designed to process ordinary input in your browser. Avoid pasting passwords, private keys, access tokens, personal records, or other sensitive production data into any online utility.
Limitations
This utility handles the focused workflow described on this page. Check the result before production use, especially when an input depends on a vendor-specific format, security rule, or external standard.