Руководство по блобам
Блобы — это мягкие органические формы с неровными, но плавными краями: дизайн-тренд, стоящий за бесчисленными hero-фонами, аватарами и разделителями секций с 2020 года. Классический CSS-приём использует 8-значный border-radius, чтобы изогнуть плоский прямоугольник в органическую форму.
Нажмите «Случайно», чтобы сгенерировать новую форму, перетащите ползунок кривизны для более круглых или эксцентричных краёв и выберите цвет. Скопируйте код border-radius прямо в CSS — без изображений, без SVG-файлов, полностью адаптивно.
Pro Tips
- Блобы лучше всего выглядят в крупном размере с мягкими градиентами. Используйте блоб как декоративный фон с лёгкой анимацией для дополнительного лоска: @keyframes morph { 50% { border-radius: другие значения; } }.
- Размещайте блобы с низкой непрозрачностью за текстом для глубины. Несколько крупных, медленно дрейфующих блобов создают современный hero-фон, не отвлекая от контента.
Frequently Asked Questions
Q: Как работает приём с блобом через border-radius?
Как работает приём с блобом через border-radius? Синтаксис из 8 значений border-radius: a b c d / e f g h задаёт разные горизонтальные и вертикальные радиусы для каждого угла. Асимметричные значения искажают прямоугольник в плавные органические формы.
Q: Можно ли анимировать блобы?
Можно ли анимировать блобы? Да. Анимация border-radius между двумя наборами органических значений через @keyframes или transition заставляет форму плавно меняться — фирменный эффект «морфящегося блоба».
Q: Блобы всё ещё в тренде в 2026?
Блобы всё ещё в тренде в 2026? Да. Органические формы выросли из тренда 2020 года в основу современного дизайна — их видно у Stripe, Vercel и в бесчисленных SaaS-hero. Они идеально сочетаются со стекломорфизмом и градиентами.
Q: SVG или CSS для блобов?
SVG или CSS для блобов? CSS border-radius легче и проще в редактировании, идеален для декоративных фонов. SVG-пути дают точный контроль для логотипов и иллюстраций ценой сложности.
Q: Как использовать блоб как фон?
Как использовать блоб как фон? Создайте позиционированный div с border-radius блоба, задайте низкий z-index, добавьте градиентную заливку и опциональное размытие, а контент разместите поверх. Медленная анимация создаст «живой фон».
Русские традиционные цвета
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый #FF2400Алый цвет знамён, сарафанов и праздничной символики
Васильковый #6495EDЦвет полевых васильков — символ русских лугов
Золото Хохломы #D4AF37Золотой орнамент хохломской росписи
Гжель Синий #005A9CКобальтовая синева гжельской керамики
Изумрудный #50C878Цвет уральских самоцветов и малахита
Бордовый #800020Тёмно-красный цвет театральных занавесов
Янтарный #FFBF00Балтийский янтарь — золото Калининграда
Сиреневый #C8A2C8Нежная сирень майских садов
Охристый #CC7722Цвет иконописи и древних фресок
Снежно-белый #F8F8FFБелый снег русских зим
Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.