Gratis CSS clamp()-generator
Genereer een vloeiende CSS clamp()-waarde voor responsieve typografie en spatiëring. Stel min/max-grootte en viewport-bereik in, bekijk een livevoorvertoning en kopieer de éénregelige CSS.
Gerenderde grootte bij verschillende viewports
clamp(min, preferred, max) schaalt een waarde vloeiend mee met de viewport en vergrendelt daarna bij min en max. Het vervangt stapels mediaquery's voor typografie, spatiëring en breedtes met één regel.
Veelvoorkomend gebruik
- Creëer Vloeiende Responsieve TypografieSchaal lettertypegroottes soepel tussen mobiel en desktop met één regel.
- Vloeiende Marges en AfstandLaat sectieafstand groeien met de viewport in plaats van bij breekpunten te springen.
- Vervang Mediaquery's door clamp()Ineenstorten stapels breekpuntoverrides in een enkele vloeiende waarde.
- Bouw een Vloeiende Type-schaalGenereer consistente clamp() stappen voor een ontwerp-systeem typeschaal.
- Vloeiende Held- en WeergavekoppelingenSchaal grote openingspagina-koppen dramatisch maar veilig.
Hoe het werkt
Deze tool berekent CSS clamp()-waarden met een zelfgeschreven lineaire interpolatieformule — geen bibliotheken, geen serververzoeken. Je voert twee groottes en twee viewportbreedtes in; de berekening draait direct in je browser en levert een clamp()-expressie klaar om te plakken, met een voorkeurswaarde in vw die je tekst of witruimte vloeiend tussen die breekpunten schaalt.
- 1Berekening van de lineaire hellingDe tool berekent een helling per pixel: (maxSize - minSize) / (maxViewport - minViewport). Die helling wordt daarna omgezet naar vw-eenheden door met 100 te vermenigvuldigen — de kern van hoe schalen ten opzichte van de viewport in CSS werkt.
- 2Afleiding van het snijpuntEr wordt een snijpuntverschuiving (in px of rem) berekend zodat de lineaire functie precies je minimale grootte raakt bij de minimale viewport. Samen vormen helling en snijpunt de voorkeurswaarde binnen clamp() — het deel dat echt schaalt.
- 3Eenheden omrekenen en uitvoer opmakenKies je rem als uitvoer, dan wordt elke pixelwaarde gedeeld door je ingestelde basislettergrootte (standaard 16px) voordat die in de clamp()-tekenreeks wordt geschreven. Er wordt ook een bijpassende Tailwind-klasse met willekeurige waarde gemaakt, met spaties vervangen door underscores volgens de syntaxis van Tailwind.
- 4Live voorbeeld met viewport-schuifregelaarMet een schuifregelaar kun je van 320px tot 1920px breed schuiven. Op elke positie berekent dezelfde formule van helling en snijpunt in realtime de begrensde grootte en toont voorbeeldtekst op die berekende pixelgrootte, zodat je het schaalgedrag ziet voordat je iets kopieert.
Gerelateerde tools
CSS-rastergenerator
Ontwerp visueel een CSS-raster — tracks, eenheden en tussenruimtes — en kopieer de gegenereerde CSS en HTML.
Wat is mijn schermresolutie
Zie je schermresolutie in CSS- en echte pixels, venstergrootte, pixelverhouding, kleurdiepte, HDR, aanraakondersteuning en verversingssnelheid, en kopieer alles.
Handtekeningmaker
Teken een handtekening met je muis, vinger of stylus, of typ je naam in een handschriftlettertype, en exporteer die als transparante PNG of SVG.