Generator CSS Clamp()
Hasilkan nilai CSS yang fluid dan responsif dengan clamp(). Skalakan dengan mulus antara ukuran minimum dan maksimum di sepanjang rentang viewport.
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
Cara menggunakan alat ini
- 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.
Apa itu Generator CSS Clamp()?
Fungsi CSS clamp(min, preferred, max) menjaga nilai tetap terbatas sekaligus memungkinkannya menskala secara mulus dalam rentang tersebut. Sempurna untuk tipografi responsif yang tumbuh dengan halus seiring lebar viewport alih-alih melompat pada breakpoint. Alat ini menghitung rumus nilai preferred yang tepat dari ukuran font minimum/maksimum dan lebar viewport Anda.
Kasus penggunaan umum
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.
Pertanyaan yang sering diajukan
Bagaimana kompatibilitas browser?▼
Alat terkait
Konverter Warna (HEX/RGB/HSL)
Konversikan warna antara format HEX, RGB, dan HSL. Pilih warna secara visual atau masukkan nilai secara manual.
Generator Box Shadow CSS
Buat nilai box-shadow CSS secara visual. Pratinjau secara real-time dan salin CSS yang dihasilkan.
Generator Gradien CSS
Buat gradien CSS linear dan radial. Pilih warna secara visual dan salin CSS yang dihasilkan.
Generator Kurva Easing Cubic Bezier
Buat kurva easing cubic-bezier untuk CSS. Termasuk preset standar.
Generator Palet Warna
Hasilkan palet warna yang harmonis dari warna dasar mana pun. Mendukung skema komplementer, analog, triadik, dan monokromatik.
Generator Border Radius CSS
Buat nilai border-radius CSS yang kompleks secara visual. Kontrol independen untuk setiap sudut.