Генератор Border Radius
Бесплатный онлайн генератор border-radius. Перетащите 8 маркеров или выберите пресет капли, чтобы создать органичные CSS-формы и мгновенно скопировать код.
Что означает синтаксис border-radius из 8 значений?
В синтаксисе border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 значения до косой черты — это горизонтальные радиусы (сверху слева, сверху справа, снизу справа, снизу слева), а после — вертикальные. Разные значения по каждому направлению и создают органичные формы-капли.
Как использовать сгенерированный CSS?
Скопируйте строку border-radius и вставьте её в любое CSS-правило нужного элемента, например .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Работает в чистом CSS, Sass, произвольных значениях Tailwind и встроенных стилях.
Где применяются формы-капли?
Формы-капли популярны для главных иллюстраций, аватаров, фото профиля, карточек функций, кнопок и декоративных фонов в современном веб- и мобильном дизайне.
Работают ли скруглённые углы во всех браузерах?
Да. border-radius поддерживается всеми современными браузерами, включая Chrome, Firefox, Safari, Edge и мобильные браузеры, без вендорных префиксов.
Можно ли анимировать форму-каплю?
Да. border-radius — анимируемое свойство, поэтому CSS-переход позволяет плавно морфировать между формами, например .blob { transition: border-radius .8s ease; }.
В чём разница между синтаксисом из 4 и из 8 значений?
Форма из 4 значений задаёт одинаковый горизонтальный и вертикальный радиус для каждого угла — этого достаточно для пилюль и кругов. Форма из 8 значений разделяет горизонтальные и вертикальные радиусы, что и позволяет создавать асимметричные органичные формы.
Как получить идеальный круг?
Установите все восемь значений на 50% у квадратного элемента или просто используйте border-radius: 50%. Также можно взять пресет, близкий к кругу, и доработать его.
Отправляются ли мои данные на сервер?
Нет. Генератор полностью работает в вашем браузере на чистых CSS и JavaScript. Всё, что вы перетаскиваете, вводите или копируете, никуда не отправляется.
Подойдёт ли для непрямоугольных и неквадратных элементов?
Да, но процентные радиусы относительны размерам элемента: на прямоугольнике углы станут эллиптическими и вид будет отличаться от квадратного предпросмотра. Используйте значения как отправную точку и подстраивайте.
Как использовать Генератор Border Radius
Восьмизначный border-radius создаёт органичные формы-блобы с эллиптическими углами, недостижимыми для обычного скруглённого прямоугольника. Лепите форму маркерами и копируйте готовый CSS — всё отрисовывается вживую в вашем браузере.
- Потяните любой из восьми маркеров на краях фигуры: верхний и нижний края задают горизонтальные радиусы, левый и правый — вертикальные.
- Кликните один из шести пресетов-квадратиков, чтобы стартовать с готового блоба, затем уточните значения в полях «Горизонтальные радиусы» и «Вертикальные радиусы» (по одному на угол, 0–100%).
- Нажмите «Случайно», чтобы одним кликом получить новую органичную форму, или «Сбросить», чтобы вернуть исходную фигуру и цвета.
- Выберите цвет фигуры и фон, чтобы посмотреть блоб на целевой палитре — оба обновляются мгновенно.
- Нажмите «Копировать CSS», чтобы забрать живое свойство border-radius из нижней панели, и вставьте его на любой элемент.
Примените код к квадратному элементу с overflow: hidden для классического вида блоба; проценты сохраняют плавность кривой при любом размере, а слэш в синтаксисе отделяет горизонтальные радиусы от вертикальных.
Похожие инструменты
- Генератор Border Radius CSS Визуальный генератор border-radius CSS. Настраивайте каждый угол независимо с предпросмотром в реальном времени и мгновенно копируйте CSS-код.
- Генератор CSS-градиентов Создавайте потрясающие CSS-градиенты визуально. Генерируйте линейные, радиальные и конические градиенты с несколькими цветовыми точками, углами и позициями. Мгновенно копируйте готовый CSS-код.
- Генератор CSS Box Shadow Бесплатный онлайн-генератор CSS box-shadow. Визуально создавайте красивые тени с настраиваемыми смещением, размытием, расширением, цветом и inset. Живой предпросмотр и мгновенное копирование кода.
- Генератор цветовых палитр Создавайте красивые гармоничные цветовые палитры мгновенно с нашим бесплатным онлайн-генератором. Поддерживает монохроматический, аналоговый, комплементарный, триадический, расщеплённо-комплементарный и тетрадический режимы. Настраивайте цвета с помощью HSL-слайдеров, блокируйте избранные и экспортируйте в CSS, Tailwind, JSON или SVG. 100% на базе браузера, ваши данные никогда не покидают устройство.
- Конвертер цветов Бесплатный онлайн-конвертер цветов. Мгновенное преобразование HEX, RGB, HSL, HSV с визуальным пикером. 100% конфиденциально, работает в браузере.
- Генератор CSS easing Бесплатный онлайн-генератор easing для CSS. Перетаскивайте контрольные точки cubic-bezier на интерактивной кривой, выбирайте из 18 пресетов, смотрите зацикленную анимацию шарика и мгновенно копируйте функцию тайминга.
- Генератор text-shadow CSS Бесплатный онлайн-генератор text-shadow CSS. Складывайте несколько слоёв тени со смещением, размытием, цветом и прозрачностью, пробуйте пресеты «Неон», «3D», «Ретро» и мгновенно копируйте CSS.
- Генератор CSS clip-path Бесплатный онлайн-генератор CSS clip-path. Создавайте формы polygon, circle, ellipse и inset с перетаскиваемыми точками, живым предпросмотром и копированием CSS в один клик.