CSS Clamp Calculator
Calculate fluid clamp() values for responsive sizing.
The CSS clamp() function lets a value grow smoothly between a minimum and a maximum as the viewport widens, which is the basis of fluid typography and spacing.
About CSS Clamp Calculator
Generate fluid, responsive sizes with the CSS clamp() function. Enter minimum and maximum sizes and the viewport range, and get an accessible rem-based clamp() value with a live preview slider — perfect for fluid typography and spacing.
The CSS clamp() function lets a value grow smoothly between a minimum and a maximum as the viewport widens, which is the basis of fluid typography and spacing. This calculator does the maths and outputs an accessible, rem-based clamp() value.
How to use CSS Clamp Calculator
- Choose the CSS property and the minimum and maximum sizes in pixels.
- Enter the viewport widths where the scaling should start and stop.
- Copy the clamp() declaration, and use the preview slider to check the result at any width.
Key features
- rem-based output that respects user font-size settings.
- Works for font-size, padding, margin, gap and more.
- Live preview with a viewport-width slider.
Common use cases
- Fluid headings that scale between mobile and desktop.
- Responsive spacing without lots of media queries.
- Replacing breakpoint-based font sizes with one line of CSS.
Frequently asked questions
Related tools
Color Picker
Click any pixel in an image to get its exact color code.
CSS Gradient Generator
Create linear, radial and conic CSS gradients visually.
Color Converter
Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH.
Color Contrast Checker
Check WCAG contrast ratio between text and background colours.