ToolsHub
CSS Generators

CSS Clamp Generator

Make font sizes and spacing grow smoothly with the screen instead of jumping at breakpoints. Enter the size you want on a small screen and on a large screen, and get a clamp() value that scales in a straight line between them, never smaller or larger than your limits. Several values can be generated at once as CSS rules or custom properties.

  • Runs in your browser
  • No sign-up
  • Free to use
Start from an example

One line per selector or custom property (--space-lg). Sizes are in px; the output uses rem so it follows the user’s font size.

px
px
px

    How to use CSS Clamp Generator

    1. List selectors or custom properties with a small and a large size.
    2. Set the small and large screen widths.
    3. Choose rem or px output and rules or custom properties.
    4. Copy the CSS and check the table of computed sizes.

    CSS Clamp Generator features

    Exact maths

    Slope and intercept calculated so the sizes hit your limits exactly.

    rem output

    Respects the user’s browser font size.

    Many values

    A whole type or spacing scale in one go.

    Custom properties

    Output as --tokens in :root.

    Size table

    Computed sizes at seven common screen widths.

    Zoom check

    Warns when text may not scale to 200% (WCAG 1.4.4).

    When to use CSS Clamp Generator

    • Fluid headings that look right on phones and wide monitors.
    • Spacing tokens that grow with the layout.
    • Container padding that increases on larger screens.
    • Replacing several media queries with one declaration.

    CSS Clamp Generator FAQ

    How does clamp() work?

    clamp(min, preferred, max) uses the preferred value but never goes below the minimum or above the maximum. The preferred value combines a fixed part in rem with a part in vw, so it grows with the viewport.

    How is the formula calculated?

    The slope is the size difference divided by the width difference. The vw part is the slope × 100, and the rem part is the small size minus slope × small width, converted to rem.

    Why rem and not px?

    With rem, the minimum, maximum and fixed part follow the user’s font size setting. Pure px values ignore it.

    What is the zoom warning about?

    Text sized mostly in vw does not grow when users zoom. WCAG requires text to resize to 200%; keeping the large size within about 2.5× the small size and including a rem part keeps zoom working.

    Do all browsers support clamp()?

    Yes, every major browser released since 2020.

    Is anything uploaded?

    No. It is calculated in your browser.

    CSS Typography Generator Create a harmonious set of font sizes for your whole site. Choose a base size and… CSS Unit Converter Convert any CSS length between pixels, rem, em, percent, viewport units and print… CSS Media Query Generator Build media queries without looking up syntax. Choose a width range, orientation… CSS Variable Generator Turn one or two brand colours into a complete set of CSS custom properties… CSS Responsive Breakpoint Generator Set up a consistent set of responsive breakpoints for your project. Start from the… CSS Font Pair Generator Choose from twenty tested heading and body font combinations, grouped by mood from…

    Fluid sizes with clamp()

    Responsive design used to change font sizes at fixed breakpoints: 32 pixels on phones, 40 on tablets, 56 on desktops. Between the breakpoints the size stays the same, then jumps. Fluid sizing replaces the steps with a smooth line, so a heading is a little larger on every slightly wider screen.

    The clamp() function makes this possible in one declaration. Its middle value mixes a constant in rem with a viewport-relative part in vw; the outer values cap it. The generator solves the straight line through your two points, the small size at the small screen width and the large size at the large width, and writes the result with four decimal places.

    Outside the chosen range the size stays at the limits, so very small phones do not get unreadable text and ultra-wide screens do not get oversized headings. The table under the code shows exactly what each value computes to at common widths.

    Accessibility deserves attention. Viewport units do not respond to browser zoom, so a size made only of vw stays the same when users zoom. Because the generated formula always includes a rem part and both limits are in rem, zoom and user font settings still have an effect. Keeping the ratio between the large and small size moderate makes sure text can still reach 200% of its size.

    The same technique works for spacing: padding, gaps and margins can grow with the layout. Generate them as custom properties such as --space-m and use them throughout your CSS for a consistent, fluid rhythm.

    Other useful tools