CSS Clamp Generator
Erzeugt eine fluide Schriftgröße ohne harte Breakpoints.
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der CSS Clamp Generator?
Der CSS Clamp Generator erzeugt eine fluide Schriftgröße mit der CSS-Funktion clamp(), die ohne harte Breakpoints flüssig zwischen einem Minimum und Maximum skaliert. Du gibst minimale und maximale Größe sowie minimale und maximale Viewport-Breite ein, das Tool liefert den fertigen clamp()-Wert zum Kopieren. Ideal für responsives Web design und Typografie.
So passt sich die Schrift stufenlos an die Bildschirmbreite an und bleibt auf kleinen wie großen Geräten gut lesbar. Das spart viele Media Queries und macht das Stylesheet schlanker. Der Generator arbeitet lokal in deinem Browser, deine Eingaben werden nicht übertragen oder gespeichert.
Beispiele
- Eine Schrift, die zwischen 16 und 24 px skaliert, ergibt eine fluide Überschrift.
- Mit Viewports von 320 bis 1280 px wächst die Schrift über typische Geräte hinweg gleichmäßig.
- Der erzeugte Wert lässt sich direkt als font-size in deinem CSS einsetzen.
- Eine clamp()-Größe von 14 bis 18 px eignet sich gut für Fließtext.
Häufige Fragen zum CSS Clamp Generator
Was macht die CSS-Funktion clamp()?
clamp() definiert einen Minimalwert, einen bevorzugten fluiden Wert und einen Maximalwert. Die Schrift skaliert stufenlos mit der Viewport-Breite, bleibt aber innerhalb der Grenzen.
Brauche ich dann noch Media Queries?
Für die reine Schriftskalierung oft nicht mehr, da clamp() flüssig anpasst. Für grundsätzlich andere Layouts auf kleinen Geräten bleiben Media Queries weiterhin sinnvoll.
Wird clamp() von Browsern unterstützt?
Ja, clamp() wird von allen modernen Browsern unterstützt. Für sehr alte Browser solltest du einen Fallback-Wert angeben.
Werden meine Eingaben gespeichert?
Nein, der Generator arbeitet komplett in deinem Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, der CSS Clamp Generator ist kostenlos und ohne Anmeldung nutzbar.
