Фон / атмосфера · mesh-gradient

Mesh / liquid gradients

Анимированные mesh- и liquid-градиенты — тренд атмосферы без WebGL

Tier 1Легко с AIОк на мобилеfreeCSS / SVG / лёгкий JS

Design DNA

«Жидкий цвет перетекает как масло — современный hero без частиц и Three.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Сделай animated mesh/liquid gradient фон на CSS/SVG (без тяжёлого WebGL).
Плавный loop, низкий CPU. Цвета из палитры проекта.
prefers-reduced-motion → статичный градиент. Не ставь Vanta «на всякий случай».

Что умеет

·CSS/SVG mesh-подобные градиенты
·Мягкая анимация blobs / liquid
·Лёгкий mobile-friendly фон

Чего не умеет

·Не фотореализм
·Не реакция на физику курсора уровня particles

Когда брать

·Трендовый hero 2024–26
·Нужна атмосфера без GPU-боли

Когда не брать

·Нужен WebGL-эффект → Vanta/Curtains
·Строгий корпоративный flat

С чем сочетается

Motionfluid-typeView Transitions

Альтернативы

VantaСтатичный CSS gradientSpline blur

Типичные ошибки

·Слишком кислотные цвета
·Анимация без reduced-motion

Демо и ссылки

CSS gradient tools Mesh gradient inspiration