01 Зачем нужен генератор неоморфизма StyleDa
Четыре главные задачи, которые инструмент решает для дизайнеров и верстальщиков на Tilda:
Эффект пластика и керамики
Создавайте реалистичные «выдавленные» из фона блоки (Raised), которые воспринимаются осязаемыми физическими элементами.
Вдавленные и нажатые кнопки
Режим Pressed (Inset) перемещает тени внутрь шейпа, создавая эффект нажатой кнопки, инпута или углубления для переключателей.
Автоматический расчет двойной тени
Больше не нужно вручную подбирать коды для светлого блика и тёмной тени: сервис рассчитывает оптически точные формулы от любого цвета фона.
Экспорт в 1 клик для Tilda
Мгновенно копируйте валидный CSS-код свойства box-shadow или выгружайте файл со стилями для вставки в настройки Tilda Zero Block.
02 Быстрый старт: Как пользоваться (Пошагово)
Создание 3D-блока с двойными тенями состоит из 3 простых шагов и занимает менее минуты:
Выберите пресет или задайте цвет поверхности
Воспользуйтесь готовыми кнопками-пресетами («Тёмный #18181b», «Светлый #e0e0e0» или «Кибер-индиго») либо укажите собственный HEX-код в поле ввода. Важное правило Soft UI: цвет поверхности шейпа должен точно совпадать с цветом фона вашей страницы на Tilda, чтобы блок выглядел единым целым с фоном.
Выберите рельеф и направление света
Укажите состояние элемента: Выпуклый (Raised) для карточек и обычных кнопок, Вдавленный (Pressed / Inset) для активных состояний или Выпукло-вогнутый для придания поверхности мягкого градиента. Кнопками углов (↖ ↗ ↙ ↘) выберите, откуда падает источник света. Рекомендация StyleDa: классическим для веб-дизайна считается свет слева вверху (↖).
Настройте ползунки и скопируйте CSS-код
Отрегулируйте скругление углов (border-radius), дистанцию тени (Distance), степень размытия (Blur) и контрастность тени. Нажмите кнопку «Скопировать CSS», чтобы перенести готовые стили в ваш проект. Лайфхак для Tilda: значение box-shadow можно вставить напрямую в настройки шейпа Zero Block или в блок T123.
03 Секреты неоморфизма в веб-дизайне
Практические рекомендации от дизайнеров студии StyleDa:
Совпадение цвета фона
В стиле Soft UI блок и страница сделаны из одного «материала». Если цвет шейпа будет хотя бы немного отличаться от фона сайта, магия объёма пропадёт.
Умеренный контраст
Не делайте тени слишком тёмными или резкими. Для реалистичного пластикового эффекта интенсивность теней должна оставаться в пределах 12–25%.
Состояние Pressed
Используйте режим Pressed (Inset) для отображения нажатой кнопки в интерактивных макетах или как стильную подложку под поля ввода форм.
04 Часто задаваемые вопросы (FAQ)
Ответы на популярные вопросы о работе с двойными тенями на Tilda:
