← Все инструменты для текста

Генератор неоморфизма

Создавайте мягкие объёмные кнопки и карточки (soft UI) и копируйте CSS.

  • Бесплатно
  • Без регистрации
  • Работает на любом устройстве

Около Генератор неоморфизма

Неоморфизм, или мягкий UI, создаёт вид кнопок и карточек, слегка выступающих из страницы или вдавленных в неё, с помощью двух теней — светлой и тёмной. Настройте размер, расстояние, размытие и форму и скопируйте CSS. Лучше всего он работает на фоне средних тонов, где парные тени остаются заметными.

Как пользоваться инструментом «Генератор неоморфизма»

  1. Выберите базовый цвет для фона и элемента.
  2. Настройте расстояние, размытие и интенсивность, пока не появится мягкий выпуклый или вдавленный вид.
  3. Скопируйте код CSS box-shadow в свой проект.

Чем полезен этот инструмент?

Другие названия

Частые вопросы

Подходит ли неоморфизм с точки зрения доступности?

Часто нет. Из-за низкого контраста между элементом и фоном границы трудно различить. Добавляйте на важные кнопки понятный текст, границы или цвет, чтобы люди со слабым зрением всё равно могли их найти.

Почему моя неоморфная кнопка исчезает на белой странице?

Эффект зависит от двух теней на средне-светлой поверхности. На чисто белом светлая тень не видна. Используйте слегка тонированный фон, чтобы были видны обе тени.

Как сделать нажатую или вдавленную кнопку?

Переключите форму на вдавленную или нажатую, если инструмент это предлагает, что переворачивает тени внутрь элемента. Используйте этот стиль для активного состояния кнопки.

Инструмент «Генератор неоморфизма» бесплатный?

Да. Инструмент «Генератор неоморфизма» на Toolipedia бесплатный: без регистрации и водяных знаков.

Это безопасно?

Да. Все вычисления выполняются в браузере, и ничего из введённого не отправляется на наш сервер.

Работает ли это на телефоне?

Да. Работает в любом современном браузере на Android и iPhone, а также на планшетах и компьютерах. Ничего не нужно устанавливать.

Нужна ли учётная запись?

Нет. Просто откройте страницу и пользуйтесь. Ни регистрации, ни электронной почты не нужно.

Можно ли разместить Генератор неоморфизма на моём сайте?

Да. Нажмите кнопку «Встроить на свой сайт» под инструментом, чтобы скопировать короткий фрагмент кода и вставить его на страницу. Это бесплатно, аккаунт не нужен, и инструмент продолжает работать внутри вашей страницы.

Похожие инструменты