CSS Clamp() Generator

Generate responsive CSS clamp() functions for fluid typography and spacing

Preset Templates

Large Heading (H1)

Responsive heading for hero sections

32px → 64px

Medium Heading (H2-H3)

Section headings with fluid scaling

24px → 40px

Small Heading (H4-H6)

Subsection headings

18px → 28px

Body Text

Readable body text scaling

16px → 20px

Caption/Small Text

Small text and captions

14px → 16px
Clamp Function Configuration
Configure the parameters for your CSS clamp function including minimum and maximum values, viewport sizes, and CSS property type.
The smallest value your property will scale to at the minimum viewport width
The largest value your property will scale to at the maximum viewport width
The CSS unit for your property values. Pixels for absolute sizing, rem for relative to document font size, em for relative to parent font size.
The viewport width where your property reaches its minimum value. Typically 320 pixels for mobile devices.
The viewport width where your property reaches its maximum value. Typically 1200 pixels or larger for desktop screens.
The CSS property this clamp function will be applied to. This affects the visual preview demonstration.