⬭ Генератор CSS Border-Radius
Создавайте точные значения CSS border-radius за секунды — без аккаунта, без установки, ничего не отправляется на сервер. Перетаскивайте ползунки для каждой угловой точки, нажмите Blob Randomize для органических форм, затем скопируйте готовый CSS напрямую в ваш стиль.
Установите независимые горизонтальные (x) и вертикальные (y) радиусы для каждой угловой точки.
Приватно по умолчанию. Этот инструмент работает полностью в вашем браузере — ничего из введённого не загружается и не сохраняется, и он работает офлайн.
Об инструменте
Этот генератор CSS Border-Radius предоставляет три режима редактирования в одном бесплатном, работающем офлайн инструменте: Простой режим позволяет настраивать все четыре угла одновременно, Режим по углам позволяет точно настраивать каждый угол отдельно, а Эллиптический режим позволяет устанавливать отдельные горизонтальные и вертикальные радиусы для каждого угла — полная мощь сокращённого синтаксиса CSS border-radius. Живая диаграмма SVG углов отражает каждое изменение в реальном времени, а кнопка Blob Randomize использует криптографически случайный алгоритм для создания органических форм, популярных в современном дизайне интерфейсов. Поскольку всё работает в вашем браузере, ваши дизайны остаются приватными, а инструмент работает даже без подключения к интернету.
Как пользоваться
- Выберите режим — Простой (все углы), Режим по углам или Эллиптический (отдельные x/y радиусы) — с помощью кнопок в верхней части панели управления.
- Перетаскивайте ползунки или введите значения напрямую в поля ввода чисел, чтобы установить радиус для каждого угла. Живой предварительный просмотр и диаграмма SVG обновляются мгновенно.
- Нажмите Blob Randomize, чтобы сгенерировать случайную органическую форму с независимыми эллиптическими радиусами — отлично подходит для декоративных элементов интерфейса и фонов главных разделов.
- Просмотрите сгенерированный сокращённый CSS в поле вывода — инструмент автоматически применяет кратчайший допустимый синтаксис (например, объединяет одинаковые значения).
- Нажмите Копировать CSS, чтобы скопировать код в буфер обмена, затем вставьте его напрямую в ваш стиль или инструмент дизайна.
Частые вопросы
- Этот генератор CSS Border-Radius полностью бесплатен?
- Да, 100% бесплатный без аккаунта, подписки и скрытых ограничений. Откройте страницу и сразу начните генерировать CSS border-radius.
- Работает ли инструмент без подключения к интернету?
- Да. Инструмент работает полностью в вашем браузере без вызовов сервера. После загрузки страницы вы можете отключиться от интернета, и инструмент продолжит работать. Ваши последние настройки также сохраняются локально в вашем браузере.
- Мои данные дизайна остаются в секрете?
- Полностью. Никакие данные никогда не покидают ваш браузер — нет загрузки, нет аналитики ваших вводов и нет хранения на сервере. Всё остаётся на вашем устройстве.
- Что делает режим Эллиптический?
- Режим Эллиптический позволяет устанавливать отдельные горизонтальные (x) и вертикальные (y) радиусы для каждого из четырёх углов, создавая полный сокращённый синтаксис CSS border-radius с обозначением через косую черту — например, border-radius: 40% 20% / 20% 40%. Это открывает асимметричные и яйцевидные формы, которые невозможно создать в режимах Простой и Режим по углам.
- Для чего нужна кнопка Blob Randomize?
- Blob Randomize использует криптографически случайный алгоритм для генерации органической, неправильной формы, назначая случайные эллиптические радиусы всем восьми комбинациям осей углов. Это идеально подходит для создания текучих форм, популярных в современных лендинг-страницах, аватарах и декоративных фонах — всего с одним кликом.
- Загружает ли этот инструмент мои данные?
- Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.