Productive Toolbox

CSS Clamp Generator

Generate responsive CSS clamp() values for typography, spacing, and layouts with live preview

CSS Clamp Generator

Generate responsive CSS clamp() values for fluid typography, spacing, and layouts with live preview and instant code output.

Configuration

Live Preview

Heading Preview

This is a paragraph with fluid font size that scales between viewports.

Scaling Graph

Viewport Simulator

Current Viewport: 768pxValue: 23.47px
320px768px1024px1440px1920px

Generated Code

font-size: clamp(16px, 1.667vw + 10.667px, 32px);
--fluid-fontsize: clamp(16px, 1.667vw + 10.667px, 32px);
$fluid-fontsize: clamp(16px, 1.667vw + 10.667px, 32px);
text-[clamp(16px,_1.667vw_+_10.667px,_32px)]

Related tools

PX to REM ConverterGolden Ratio CalculatorCSS Gradient GeneratorBox Shadow Neumorphism GeneratorCSS Animation PreviewerCSS Button Style GeneratorCSS Box Shadow GeneratorCSS Glassmorphism Generator

How to Use the CSS Clamp Generator

  1. 1. Choose the property

    Pick font size, padding, margin, gap, width, height, border radius, letter spacing or line height; each preset fills in sensible defaults.

  2. 2. Set the sizes

    Enter the smallest and largest value and choose px, rem or em. For rem and em, set the root font size, 16 px in most browsers.

  3. 3. Set the viewport range

    Enter the screen widths in px where the value should start and stop growing, or pick a range such as Mobile or Full Range.

  4. 4. Check the preview

    Drag the viewport simulator to see the value at any screen width, and watch the graph of the scaling.

  5. 5. Copy the code

    Copy it as a CSS declaration, a CSS custom property, an SCSS variable or a Tailwind arbitrary-value class.

Understanding CSS Clamp()

What is CSS Clamp?

The CSS clamp() function allows you to set a value that scales fluidly between a minimum and maximum value based on the viewport size. It takes three parameters:

clamp(MIN, PREFERRED, MAX)
  • MIN: The minimum value (lower bound)
  • PREFERRED: The ideal value, typically using viewport units (vw)
  • MAX: The maximum value (upper bound)

How Clamp Works

The browser evaluates the preferred value and constrains it between the min and max:

  • If preferred value < min → use min
  • If preferred value > max → use max
  • Otherwise → use preferred value

Real-World Example

font-size: clamp(16px, 2vw + 12px, 32px);

This creates a font size that:

  • Never goes below 16px (mobile readability)
  • Scales with viewport width (2vw + 12px)
  • Never exceeds 32px (desktop maximum)

Common Use Cases

Fluid Typography

Create responsive text that scales smoothly across all screen sizes without media queries.

h1 { font-size: clamp(2rem, 5vw, 4rem); }

Responsive Spacing

Make padding and margins adapt to viewport size for better layouts.

.container { padding: clamp(1rem, 3vw, 3rem); }

Flexible Layouts

Create container widths that adapt without breakpoints.

.card { width: clamp(300px, 50vw, 600px); }

Fluid Gaps

Make grid and flexbox gaps responsive automatically.

.grid { gap: clamp(1rem, 2vw, 2rem); }

Best Practices

Start with Accessibility

Ensure minimum font sizes are at least 14-16px for readability

Test Across Viewports

Use the viewport simulator to verify scaling behavior at all sizes

Use Relative Units

Consider using rem or em for better accessibility and user preferences

Create Typography Scales

Use the scale generator to maintain consistent proportions across headings

Document Your Values

Use CSS variables to make clamp values reusable and maintainable

Frequently Asked Questions

What does CSS clamp() do?

clamp(MIN, PREFERRED, MAX) uses the preferred value but never goes below MIN or above MAX. With a preferred value in vw, such as clamp(1rem, 1.667vw + 0.667rem, 2rem), the size grows smoothly with the screen width between the two limits, without media queries.

How is the preferred value calculated?

It is the straight line through the two points (min width, min size) and (max width, max size). The slope is (max size − min size) ÷ (max width − min width), written as slope × 100 in vw, and the intercept is min size − slope × min width. For 16–32 px between 320 and 1280 px screens, that gives 1.667vw + 10.667px.

Should I use px or rem?

Use rem for font sizes. Values in rem follow the user's browser font-size setting, so text still scales for people who enlarge it. px is fine for borders and small fixed details.

Is fluid typography accessible?

Yes, if it still responds to zoom. A preferred value made only of vw does not grow when the user zooms, so always add a rem part (such as 1.5vw + 0.75rem), and keep the maximum no more than about 2.5 times the minimum so text can still reach 200% zoom, as WCAG 1.4.4 requires.

How is clamp() different from min() and max()?

min() picks the smallest of its values and max() the largest. clamp(MIN, VAL, MAX) is the same as max(MIN, min(VAL, MAX)): it applies both limits at once.

Which browsers support clamp()?

All current browsers: Chrome and Edge 79+, Firefox 75+ and Safari 13.1+ (since 2020). Internet Explorer does not; if you still support it, declare a fixed value on the line before the clamp() value as a fallback.

Advanced Tips

Combining with CSS Variables

:root { --fluid-text: clamp(1rem, 2vw + 0.5rem, 2rem); --fluid-space: clamp(1rem, 3vw, 3rem); } h1 { font-size: var(--fluid-text); } .container { padding: var(--fluid-space); }

Creating Design Systems

Use clamp() to build entire fluid design systems with consistent scaling ratios:

--space-xs: clamp(0.5rem, 1vw, 1rem); --space-sm: clamp(1rem, 2vw, 2rem); --space-md: clamp(1.5rem, 3vw, 3rem); --space-lg: clamp(2rem, 4vw, 4rem); --space-xl: clamp(3rem, 6vw, 6rem);

Fallbacks for Older Browsers

h1 { font-size: 2rem; /* Fallback */ font-size: clamp(1.5rem, 4vw, 3rem); }

Related Tools

PX to REM Converter

Convert pixel values to rem/em units with configurable base font size.

Golden Ratio Calculator

Split number into 1.618 golden ratio parts.

CSS Gradient Generator

Create linear and radial gradients with copy-ready CSS.

Box Shadow Neumorphism Generator

Create raised and pressed soft UI styles with live preview.

CSS Animation Previewer

Preview easing and cubic-bezier animations with live controls.

CSS Button Style Generator

Design a button visually with color, border-radius, shadow, and hover effects. Get copy-ready CSS.

CSS Box Shadow Generator

Build layered shadows with live preview and copy-ready CSS.

CSS Glassmorphism Generator

Create frosted glass effects with live preview and copy-ready code.

CSS Filter Tester

Preview and tune CSS image filters with live sliders.

CSS Border-Radius Blob Maker

Create organic, non-round shapes.

CSS Mesh Gradient Generator

Create trendy multi-color backgrounds.

CSS Keyframe Animator

Timeline UI to build @keyframes.

Browse all 33 Design Tools →