📐

Percuma CSS clamp() Generator

Generate a fluid CSS clamp() value for responsive typography and spacing. Set min/max size and viewport range, see a live preview, and copy the one-line CSS.

Runs in your browserNo sign-up, no pop-upsTiada log masuk diperlukanPercuma selama-lamanya

Min size (px)

Max size (px)

Min viewport (px)

Max viewport (px)

Output unit:

CSS value

font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);

Rendered size at different viewports

375px wideAa 16px

908px wideAa 24px

1440px wideAa 32px

💡 clamp(min, preferred, max) scales a value fluidly with the viewport, then locks at the min and max. It replaces stacks of media queries for typography, spacing, and widths with a single line.

Optimize for your platform

Create Fluid Responsive Typography Fluid Margins & Padding Replace Media Queries with clamp()Build a Fluid Type Scale Fluid Hero & Display Headings

Cara ia berfungsi

1

Masukkan

Masukkan teks atau data anda.

2

Proses

Diproses serta-merta dalam pelayar anda. Tiada pelayan, tiada menunggu.

3

Muat turun

Simpan keputusan anda. Tiada apa yang disimpan.

Mengapa alat kami?

✓Completely free — no hidden costs, ever

✓No account, email, or login required

✓Runs entirely in your browser — no uploads

✓Works on any device — phone, tablet, desktop

✓Open and ad-supported, with no tracking

✓Loads fast, with no installation needed

Alat berkaitan

Penjana Kod QR

Jana kod QR untuk URL, teks, WiFi dan lain-lain. Tiada tera air.

Pemilih Warna & Penjana Palet

Pilih warna, tukar antara HEX/RGB/HSL dan jana palet yang harmoni.

Penjana Kata Laluan

Hasilkan kata laluan rawak yang kukuh dengan panjang tersuai, jenis aksara dan pengecualian. Tiada had, tiada log masuk.

Adakah alat ini berguna?

Soalan lazim