CSS-clamp()-Generator – kostenlos
Einen fließenden CSS-clamp()-Wert für responsive Typografie und Abstände generieren. Min./Max.-Größe und Viewport-Bereich einstellen, Live-Vorschau ansehen und das einzeilige CSS kopieren.
Dargestellte Größe bei verschiedenen Viewports
clamp(min, preferred, max) skaliert einen Wert fließend mit dem Viewport und sperrt ihn bei Min. und Max. Es ersetzt gestapelte Media Queries für Typografie, Abstände und Breiten durch eine einzige Zeile.
Häufige Anwendungen
- Erstellen Sie flüssige responsive TypografieSkalieren Sie Schriftgrößen reibungslos zwischen Mobilgeräten und Desktop mit einer Zeile.
- Flüssige Ränder und PolsterungMachen Sie Bereichsabstände mit dem Ansichtsfenster wachsen, anstatt an Haltepunkten zu springen.
- Ersetzen Sie Medienabfragen durch clamp()Falten Sie Stapel von Haltepunktüberschreibungen in einen einzelnen flüssigen Wert zusammen.
- Erstellen Sie eine flüssige TypenskalaGenerieren Sie konsistente clamp()-Schritte für eine Design-System-Typenskala.
- Flüssige Helden- und Display-ÜberschriftenMachen Sie große Landing-Page-Überschriften dramatisch aber sicher skalierbar.
So funktioniert es
Dieses Tool berechnet CSS-clamp()-Werte mit einer selbst geschriebenen linearen Interpolationsformel – keine Bibliotheken, keine Serverumwege. Sie geben zwei Größen und zwei Viewport-Breiten ein; die Berechnung läuft sofort in Ihrem Browser und erzeugt einen einfügefertigen clamp()-Ausdruck mit einem vw-basierten Vorzugswert, der Schrift oder Abstände gleichmäßig zwischen diesen Breakpoints skaliert.
- 1Berechnung der linearen SteigungDas Tool berechnet eine Steigung Pixel pro Pixel: (maxSize - minSize) / (maxViewport - minViewport). Diese Steigung wird durch Multiplikation mit 100 in vw-Einheiten umgerechnet – der Kern der viewport-relativen Skalierung in CSS.
- 2Ableitung des AchsenabschnittsEin Achsenabschnitt (in px oder rem) wird so berechnet, dass die lineare Funktion beim minimalen Viewport genau Ihre Mindestgröße trifft. Zusammen bilden Steigung und Achsenabschnitt den Vorzugswert in clamp() – den Teil, der tatsächlich skaliert.
- 3Einheitenumrechnung und AusgabeformatierungWenn Sie rem als Ausgabe wählen, wird jeder Pixelwert durch Ihre eingestellte Root-Schriftgröße (Standard 16px) geteilt, bevor er in die clamp()-Zeichenkette geschrieben wird. Außerdem wird eine passende Tailwind-Klasse mit beliebigem Wert erzeugt, bei der Leerzeichen gemäß Tailwind-Syntax durch Unterstriche ersetzt werden.
- 4Live-Vorschau mit Viewport-ReglerMit einem Bereichsregler können Sie von 320px bis 1920px Breite fahren. An jeder Position wertet dieselbe Formel aus Steigung und Achsenabschnitt die begrenzte Größe in Echtzeit aus und zeigt Beispieltext in dieser berechneten Pixelgröße, sodass Sie das Skalierungsverhalten sehen, bevor Sie etwas kopieren.
Ähnliche Tools
CSS-Grid-Generator
Entwerfen Sie visuell ein CSS-Grid — Spuren, Einheiten und Abstände — und kopieren Sie das generierte CSS und HTML.
Wie hoch ist meine Bildschirmauflösung
Sehen Sie Ihre Bildschirmauflösung in CSS- und echten Pixeln, Fenstergröße, Pixeldichte, Farbtiefe, HDR, Touch-Unterstützung und Bildwiederholrate, und kopieren Sie alles.
Unterschrift erstellen
Zeichnen Sie eine Unterschrift mit Maus, Finger oder Stift oder tippen Sie Ihren Namen in einer Handschrift-Schriftart und exportieren Sie sie als transparentes PNG oder SVG.