Генератор CSS border-radius (Blob)
Настраивайте горизонтальные и вертикальные радиусы углов через слэш (/) — создавайте трендовые «живые» органические кляксы (blobs) и анимируйте их.
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
background: linear-gradient(135deg, #6366f1, #a855f7);
}Как пользоваться
- Выберите готовый пресет (капля, органика, капсула, яйцо, кристалл) или подвигайте ползунки углов.
- Настройте 4 горизонтальных и 4 вертикальных радиуса в процентах для создания уникальной плавной асимметрии.
- Включите тумблер «Анимация морфинга» (Live morph), чтобы увидеть плавное перетекание формы.
- Выберите градиентные цвета заливки, размер блока и скопируйте готовый CSS-код.
Как это работает
Синтаксис из 8 значений и разделитель слэш (/)
Обычно в CSS используют одно или четыре значения border-radius. Но спецификация позволяет задавать эллиптические углы: у каждого угла есть горизонтальный и вертикальный радиусы. Они разделяются символом слэша /: сначала 4 горизонтальных радиуса (по часовой стрелке, начиная с верхнего левого), а затем 4 вертикальных.
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;Секрет органических фигур (Blobs)
Когда горизонтальные и вертикальные радиусы соседних углов не совпадают, углы перестают быть четвертями правильной окружности и становятся эллипсами. В результате прямоугольник превращается в мягкую, естественную фигуру — каплю, гальку или текучую каплю жидкости.
Плавная анимация морфинга
Свойство border-radius прекрасно интерполируется браузером на GPU через @keyframes. Задав 2–3 ключевых кадра с разными комбинациями 8 значений, вы получаете непрерывно пульсирующий, живой фоновый элемент без единой строчки JavaScript или тяжелых canvas-библиотек.
@keyframes morph {
0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}Частые вопросы
В каком порядке указываются углы?
По часовой стрелке: top-left, top-right, bottom-right, bottom-left. После слэша те же углы указываются для вертикальной оси в том же порядке.
Зачем нужен слэш в border-radius?
Слэш указывает браузеру, что форма угла — эллипс, а не правильный круг. До слэша задаётся ширина радиуса (горизонтальная полуось), а после — высота (вертикальная полуось).
Поддерживается ли это всеми браузерами?
Да, синтаксис со слэшем входит в базовый стандарт CSS Backgrounds and Borders Module Level 3 и стабильно работает во всех браузерах более десяти лет.
