Fluid Typography & Clamp Generator
Calculate a CSS clamp expression between two viewport sizes.
Bookmark this page
Keep this page handy for next time.
- On a computer
- Press Ctrl + D, or Command + D on a Mac.
- On a phone or tablet
- Open your browser's menu or Share menu and look for Add Bookmark, Bookmark or Add to favourites.
A bookmark saves the page link. Save any tool results separately.
Processed on your device
How to use this tool
- Enter the values for fluid typography & clamp generator.
- Adjust the labelled settings, then run the tool. Calculate a CSS clamp expression between two viewport sizes.
- Review the result before copying or downloading it. Clear the tool when finished.
Things to know
- Assumes the chosen root font size for the rem calculation. Browser zoom and a changed root font size affect the actual result.
You might also need
More in images & designCSS Gradient Generator
Preview a two-colour linear gradient and copy its CSS.
Image Print Size & PPI Calculator
Calculate print dimensions from pixel dimensions and resolution.
Image Comparison
Compare two same-size images and download a highlighted pixel-difference image.
Colour Contrast Checker
Calculate contrast and show WCAG AA and AAA text thresholds.
Compress image to a file size
Make a JPEG or WebP that fits a target file size, with quality and dimension adjustments.
CSS Easing Curve Generator
Preview a cubic-bezier curve and export the CSS timing function.
CSS Flexbox & Grid Generator
Preview a simple responsive layout and export its HTML and CSS.
CSS Shadow Generator
Preview an adjustable box shadow and copy CSS.
Image Compressor
Re-encode an image and compare the actual file size with the original.