CSS clamp() Generator
Genereer een fluid clamp() waarde.
CSS
Live preview (past zich aan aan je scherm)
De snelle bruine vos springt.
Wat doet deze tool?
Genereert een CSS clamp()-functie voor fluid typography: tekst schaalt automatisch tussen een minimum en maximum op basis van de viewport-breedte.
Hoe werkt de berekening?
clamp(MIN, PREFERRED, MAX) neemt de middelste waarde tenzij die buiten de grenzen valt. De tool berekent de 'preferred' als een lineaire interpolatie: '1rem + (16 - 12) × ((100vw - 320px) / (1440 - 320))'.
Een concreet voorbeeld
Min 14px op 320px viewport, max 24px op 1440px → 'font-size: clamp(0.875rem, 0.607rem + 1.34vw, 1.5rem);'. Tekst schaalt vloeiend tussen mobiel en desktop.
Veelgestelde vragen
Waarom clamp() in plaats van media queries?+
Vloeiender: geen 'sprongen' op breakpoints. Ook minder CSS te onderhouden.
Kan ik clamp() voor padding of margin gebruiken?+
Ja. Elke lengte-eigenschap kan clamp() aan — perfect voor fluid spacing.
Ondersteunen alle browsers clamp()?+
Ja, sinds ~2020 in alle moderne browsers. Voor oudere fallbacks kun je een vaste waarde als backup zetten.