Создатель блобов

Руководство по блобам

Блобы — это мягкие органические формы с неровными, но плавными краями: дизайн-тренд, стоящий за бесчисленными hero-фонами, аватарами и разделителями секций с 2020 года. Классический CSS-приём использует 8-значный border-radius, чтобы изогнуть плоский прямоугольник в органическую форму.

Нажмите «Случайно», чтобы сгенерировать новую форму, перетащите ползунок кривизны для более круглых или эксцентричных краёв и выберите цвет. Скопируйте код border-radius прямо в CSS — без изображений, без SVG-файлов, полностью адаптивно.

Pro Tips

• Блобы лучше всего выглядят в крупном размере с мягкими градиентами. Используйте блоб как декоративный фон с лёгкой анимацией для дополнительного лоска: @keyframes morph { 50% { border-radius: другие значения; } }.
• Размещайте блобы с низкой непрозрачностью за текстом для глубины. Несколько крупных, медленно дрейфующих блобов создают современный hero-фон, не отвлекая от контента.