Generator CSS clamp()
Generuj płynne, responsywne wartości CSS za pomocą clamp(). Skaluje się gładko między rozmiarem minimalnym a maksymalnym w zakresach widoku.
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
Jak korzystać z tego narzędzia
- 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.
Czym jest generator CSS clamp()?
Funkcja CSS clamp(min, preferowana, max) utrzymuje wartość w ograniczonym zakresie, jednocześnie pozwalając jej płynnie skalować się w obrębie tego zakresu. Idealna do responsywnej typografii, która rośnie gładko wraz z szerokością widoku zamiast skakać w punktach przełamania. To narzędzie oblicza poprawną formułę wartości preferowanej na podstawie Twoich minimalnych/maksymalnych rozmiarów czcionki oraz szerokości widoku.
Typowe przypadki użycia
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.
Najczęściej zadawane pytania
Kompatybilność z przeglądarkami?▼
Powiązane narzędzia
Konwerter kolorów (HEX/RGB/HSL)
Konwertuj kolory między formatami HEX, RGB i HSL. Wybierz kolor wizualnie lub wprowadź wartości ręcznie.
Generator box-shadow CSS
Twórz wizualnie wartości box-shadow w CSS. Podgląd w czasie rzeczywistym i kopiowanie wygenerowanego CSS.
Generator gradientów CSS
Twórz liniowe i radialne gradienty CSS. Wybieraj kolory w sposób wizualny i kopiuj wygenerowany kod CSS.
Generator krzywych przyspieszenia cubic-bezier
Twórz krzywe przyspieszenia cubic-bezier dla CSS. Zawiera standardowe ustawienia predefiniowane.
Generator palet kolorów
Generuj harmonijne palety kolorów z dowolnego koloru bazowego. Obsługuje schematy dopełniające, analogiczne, triadyczne i monochromatyczne.
Generator border-radius CSS
Twórz wizualnie złożone wartości border-radius w CSS. Niezależna kontrola każdego rogu.