CSS clamp Rechner
Läuft komplett in deinem Browser - kein Upload, keine Anmeldung.
Generated CSS
Clamp value
CSS declaration
font-size: clamp(16px, 11.4286px + 1.4286vw, 32px);Fluid preview text
320px: 16px88px: 24px1440px: 32px
What is a CSS clamp Rechner?
A CSS clamp Rechner turns a minimum size, maximum size and viewport range into a responsive clamp() value. It calculates the slope, intercept and preferred vw expression, then outputs copyable CSS for fluid typography, spacing, widths or any length that should scale smoothly.
So funktioniert’s
- 1Enter the size range. Set the minimum and maximum value you want the CSS property to use.
- 2Enter the viewport range. Set the viewport width where scaling begins and the viewport width where scaling stops.
- 3Choose the unit. Pick px, rem or em for the generated min, intercept and max lengths.
- 4Copy the CSS. Copy the clamp() value or the full font-size declaration into your stylesheet.
Für wen
- Front-end developers generating responsive font-size declarations without hand-calculating vw coefficients.
- Design-system maintainers turning type-scale decisions into reusable CSS tokens for headings, gaps and component spacing.
- UI designers checking how a fluid value behaves at the small, middle and large viewport breakpoints.
- CSS learners seeing how slope and intercept produce the preferred clamp() expression.
This Deutsch page keeps CSS syntax unchanged because clamp(min, preferred, max), vw, rem and em are code terms. The calculator uses slope = (max size - min size) / (max viewport - min viewport), and intercept = min size - slope * min viewport. Everything runs in your browser.
Häufige Fragen
Is this CSS clamp Rechner free?
Yes. The calculator is free to use with no sign-up and no download. Enter your sizes and viewport widths, then copy the generated clamp() value or complete CSS declaration.
Is my CSS uploaded anywhere?
No. The calculation happens entirely in your browser with plain JavaScript. Your values, generated CSS and clipboard action do not need to leave your device.
What is the CSS clamp() syntax?
The syntax is clamp(min, preferred, max). The browser uses the preferred value while it is between the minimum and maximum, then locks to the nearest limit when the preferred value goes outside that range.
How is the preferred vw value calculated?
The slope is (max size - min size) divided by (max viewport - min viewport). The intercept is min size - slope * min viewport. The preferred value is intercept plus slope * 100vw.
Can I use this as a fluid typography calculator?
Yes. Fluid typography is the most common use case. Set the smallest and largest font size, choose the viewport range, and copy the resulting clamp() into a font-size declaration.
Can clamp() use rem or em?
Yes. The generated min, intercept and max can use px, rem or em. The viewport part remains vw because the preferred value needs to respond to viewport width.
What happens if the viewport values are the same?
The formula cannot divide by zero, so the calculator shows an error when the minimum and maximum viewport are equal. Use two different viewport widths to create a fluid range.