CSS clamp()-generator
Genereer vloeiende, responsieve CSS-waarden met clamp(). Schaalt soepel tussen minimum- en maximumformaten over de viewportbereiken heen.
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
Hoe u deze tool gebruikt
- 1
Enter the minimum size in pixels (the value at and below your small viewport).
- 2
Enter the maximum size in pixels (the value at and above your large viewport).
- 3
Set the min and max viewport widths in pixels that define where scaling starts and stops.
- 4
Read the generated clamp() declaration and click Copy to paste it into your stylesheet.
Wat is de CSS clamp()-generator?
De CSS-functie clamp(min, voorkeur, max) houdt een waarde begrensd terwijl deze vloeiend binnen het bereik mag schalen. Ideaal voor responsieve typografie die soepel meegroeit met de viewportbreedte in plaats van te springen op de breekpunten. Deze tool berekent de juiste formule voor de voorkeurswaarde op basis van uw minimale/maximale lettergroottes en de viewportbreedtes.
Veelvoorkomende toepassingen
Building fluid headings that grow from 24px on mobile to 48px on desktop without writing media-query breakpoints.
Setting responsive body copy that stays readable between a 320px phone and a 1200px laptop.
Scaling section padding or gap values fluidly so layouts breathe proportionally across screen sizes.
Replacing a stack of font-size overrides at 480px, 768px, and 1024px with one clamp() declaration.
Generating clamp() values for a design system so spacing and type scale consistently from one formula.
Quickly checking the px and vw math for a fluid value you sketched out in a design tool like Figma.
Veelgestelde vragen
Browsercompatibiliteit?▼
Gerelateerde tools
Kleurconverter (HEX/RGB/HSL)
Zet kleuren om tussen de formaten HEX, RGB en HSL. Kies een kleur visueel of voer de waarden handmatig in.
CSS box-shadow-generator
Maak box-shadow-waarden in CSS op een visuele manier. Bekijk een realtime voorvertoning en kopieer de gegenereerde CSS.
CSS-verloopgenerator
Maak lineaire en radiale CSS-verlopen. Kies de kleuren op visuele wijze en kopieer de gegenereerde CSS.
Cubic-bezier-versnellingscurvegenerator
Maak cubic-bezier-versnellingscurves voor CSS. Inclusief standaard voorinstellingen.
Kleurpaletgenerator
Genereer harmonieuze kleurpaletten op basis van een willekeurige basiskleur. Ondersteunt complementaire, analoge, triadische en monochromatische schema's.
CSS border-radius-generator
Maak complexe border-radius-waarden in CSS op een visuele manier. Onafhankelijke controle over elke hoek.