Генератор органічної форми blob у CSS
Проєктуйте CSS border-radius наочно: чотири незалежні повзунки кутів у px або відсотках, ярлик «зв'язати всі кути» для миттєвих кіл і пігулок, а також органічний режим blob із випадковими формами.
Результат
Ця сторінка відкриває генератор border-radius одразу в режимі blob із уже завантаженою органічною формою: жодних прямих кутів, жодного ідеального кола — лише м'який нерівний контур, побудований виключно на CSS. Натисніть Randomize будь-коли, щоб отримати нову варіацію.
Хитрість за кожним CSS-блобом — восьмизначний синтаксис зі слешем: border-radius приймає два набори по чотири відсотки, розділені слешем, перший набір вигинає горизонтальні радіуси, другий — вертикальні. Саме розбіжність між цими двома наборами й ламає симетрію звичайного заокругленого прямокутника, перетворюючи його на органічний контур.
Такі блоби заповнюють порожній простір за героєм-зображеннями, аватарами та ілюстраціями на незліченних сучасних лендингах саме тому, що не потрібні ні бібліотека, ні SVG-експорт — це всього чотири рядки CSS. Скопіюйте поточну форму або продовжуйте рандомізувати, доки не знайдете ту, що пасує вашому макету.