Генератор CSS clamp()
Генерирует плавные адаптивные значения CSS с помощью clamp(). Плавно масштабируется между минимальным и максимальным размерами в пределах диапазонов области просмотра.
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
Как пользоваться этим инструментом
- 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.
Что такое генератор CSS clamp()?
Функция CSS clamp(мин, предпочтительное, макс) удерживает значение в заданных границах, позволяя ему при этом плавно масштабироваться внутри диапазона. Идеально подходит для адаптивной типографики, которая плавно растёт с шириной области просмотра, а не скачет на контрольных точках. Этот инструмент рассчитывает правильную формулу предпочтительного значения на основе ваших минимального/максимального размеров шрифта и значений ширины области просмотра.
Типичные сценарии использования
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.
Часто задаваемые вопросы
Совместимость с браузерами?▼
Похожие инструменты
Конвертер цвета (HEX/RGB/HSL)
Преобразует цвета между форматами HEX, RGB и HSL. Выберите цвет визуально или введите значения вручную.
Генератор CSS box-shadow
Визуально создавайте значения box-shadow в CSS. Предпросмотр в реальном времени и копирование сгенерированного CSS.
Генератор CSS-градиентов
Создавайте линейные и радиальные CSS-градиенты. Выбирайте цвета визуально и копируйте сгенерированный CSS.
Генератор кривых ускорения cubic-bezier
Создаёт кривые ускорения cubic-bezier для CSS. Включает стандартные предустановки.
Генератор цветовых палитр
Генерирует гармоничные цветовые палитры на основе любого базового цвета. Поддерживает комплементарные, аналоговые, триадические и монохроматические схемы.
Генератор CSS border-radius
Визуально создавайте сложные значения border-radius в CSS. Независимое управление каждым углом.