ПаветтаГенератор неоморфизма
Неоморфизм строится на одном приёме: элемент и фон одного цвета, а форму задают две тени — светлая со стороны источника света и тёмная с противоположной. Выглядит так, будто кнопка выдавлена из того же материала, что и подложка.
CSS
Две тени и один цвет
Неоморфизм строится на одном приёме: элемент и фон одного цвета, а форму задают две тени — светлая со стороны источника света и тёмная с противоположной. Выглядит так, будто кнопка выдавлена из того же материала, что и подложка. Инструмент собирает выпуклую, вдавленную и плоскую формы и отдаёт готовую запись.
Вдавленность получается теми же тенями, только внутренними: ключевое слово inset переворачивает их внутрь элемента. Смена выпуклого состояния на вдавленное при нажатии — самая естественная анимация для этого стиля, и стоит она двух правил.
Цвет фона решает всё. Стиль работает только на средних по светлоте тонах: на чистом белом нет места светлой тени, на чёрном — тёмной. Обычно берут светло-серый около девяноста процентов светлоты, а тени подкрашивают в тон фона вместо чистого серого.
| Состояние | Тени | Где применяют |
|---|---|---|
| Выпуклое | светлая сверху, тёмная снизу | Кнопка в покое |
| Вдавленное | те же, но inset | Нажатие, поле ввода |
| Плоское | без теней | Отключённое состояние |
От скевоморфизма к неоморфизму и обратно
Стиль наследует скевоморфизму — подходу, где экранный элемент изображает физический предмет. Интерфейсы двухтысячных были полны такого: блокнот с кожаным переплётом, календарь с оторванными страницами, кнопка с настоящим бликом. В 2013 году iOS 7 разом от этого отказалась, и десять лет объём считался дурным тоном.
Возвращение началось в конце 2019 года: дизайнер Александр Плюто выложил концепт интерфейса, где кнопки выдавлены из фона, и работа разошлась по сообществу. Название неоморфизм предложил Михал Малевич — как соединение нового скевоморфизма.
Массовым стиль не стал по понятной причине: у него плохо с доступностью. Граница элемента задана только мягкой тенью, контраст между кнопкой и фоном стремится к нулю, и людям со слабым зрением такой интерфейс почти не читается. Стандарт доступности требует контраста не ниже трёх к одному для границ элементов управления; неоморфизм по построению его не даёт. Барельеф и тиснение работают ровно по этому же принципу несколько тысяч лет: материал один, форму читает глаз по распределению света.
Где стиль уместен и что добавить ради доступности
Задайте цвет фона и радиус скругления, дальше подберите расстояние теней: обычно оно равно четверти-трети размера элемента. Светлая тень должна быть светлее фона примерно на десять процентов, тёмная — на столько же темнее. Ровно белая и ровно чёрная тени выглядят грязно.
Пользуйтесь стилем точечно. Панель регуляторов, плеер, экран умного дома — там он уместен, потому что элементов немного и все они крупные. Форма с десятком полей ввода в этом стиле превращается в нечитаемую вафлю.
И добавьте второй признак состояния помимо тени: рамку, изменение цвета текста или подпись. Тогда кнопка останется понятной и в высококонтрастном режиме, и человеку, который различает тени плохо. Тени соберёт генератор box-shadow, а стекло — генератор glassmorphism.
Сохраните набор из трёх состояний в переменные и пользуйтесь только ими. Разброс параметров теней по проекту разрушает главное свойство стиля: ощущение, что все элементы вылеплены из одного материала при одном источнике света. Инструмент отдаёт готовую запись для всех трёх состояний сразу, вместе с цветом фона, — остаётся вставить её в стили и подставить свой тон.
| Основа эффекта | две тени |
| Вдавленность | inset |
| Светлота фона | около 90 % |
| Смещение теней | четверть размера |
| Разница со светлой тенью | около 10 % |
| Появление концепта | конец 2019 |
| Предок стиля | скевоморфизм |
| Требование контраста | не ниже 3 : 1 |
Как пользоваться
Если тени поменять местами и убрать внутрь, элемент становится вдавленным. Инструмент собирает обе формы, даёт покрутить угол света, расстояние, размытие и интенсивность и сразу показывает результат на кнопке, карточке и переключателе. Рядом стоит предупреждение о доступности, потому что у стиля есть встроенная проблема: контраста границ почти нет, и элемент трудно опознать как нажимаемый.
- Он же цвет элемента — в этом суть приёма. Тени считаются от него.
- Угол, расстояние, размытие и интенсивность — ползунками справа.
- Выпуклая, вдавленная, плоская или выдавленная с градиентом.
- Готовые правила для элемента и для его нажатого состояния.
Частые вопросы
Почему у элемента две тени
Потому что объём читается из направления света. Одна тень светлее фона и лежит со стороны источника, вторая темнее и лежит напротив. Мозг достраивает по ним форму. С одной тенью элемент выглядит просто приподнятым, и объёма подложки не возникает.
Чем inset-тень отличается от обычной
Ключевое слово inset уводит тень внутрь элемента. Тот же набор из светлой и тёмной тени, перенесённый внутрь и с обратными знаками смещения, читается как вдавленность. На этом строятся нажатые состояния кнопок и поля ввода в неоморфном стиле.
Главная проблема неоморфизма
Доступность. Границ у элемента нет, контраст между кнопкой и фоном близок к нулю, и человек с ослабленным зрением не отличит нажимаемое от декоративного. Требование WCAG к нетекстовым элементам интерфейса — контраст 3:1 с окружением, и чистый неоморфизм его не выполняет в принципе. Практический выход — оставить приём для декоративных карточек, а для управляющих элементов добавить рамку, иконку или цветовой акцент.
Какой фон подходит лучше всего
Средне-светлый серый с лёгким уходом в тёплый или холодный тон, примерно от #e0e0e0 до #eef0f4. На чистом белом светлой тени просто не остаётся места — она сливается с фоном. На тёмном фоне приём работает, но требует более контрастных теней, иначе объём пропадает.
Как считаются цвета теней
От цвета фона: светлая тень — тот же цвет, осветлённый на заданный процент, тёмная — затемнённый на столько же. Поэтому фон и тени всегда согласованы, и не нужно подбирать оттенки вручную. Интенсивность как раз задаёт этот процент.
Стиль всё ещё в моде
Как основа целого интерфейса — нет, пик пришёлся на 2020 год и прошёл ровно из-за проблем с доступностью. Отдельные приёмы остались: мягкая двойная тень на карточках и вдавленные поля ввода встречаются в дашбордах и в интерфейсах приложений для умного дома, где эстетика физического прибора уместна.
Спросите нейросети об инструменте
Похожие инструменты
Тень блока со слоями: смещение, размытие, растяжение, цвет и прозрачность. Внутренняя тень, готовые пресеты и разбор чужого значения.
ОткрытьГенератор glassmorphismЭффект матового стекла на CSS: размытие фона, прозрачность, рамка и тень. С проверкой читаемости и запасным вариантом.
ОткрытьМинификация CSSСжатие стилей с подсчётом экономии в байтах и после gzip. Обратное разворачивание минифицированного кода в читаемый вид.
ОткрытьНаклейки на тетрадиНаклейки для подписи тетрадей по всем предметам сразу: фамилия и имя склоняются в родительный падеж, ученика или ученицы, школа и класс, шесть оформлений, три размера, печать на А4 с линиями отреза.
ОткрытьПазлы онлайнПазл из своего фото или картинки галереи: 12–200 кусочков с выступами, стыковка в группы, образец, подсказка, таймер, ходы и рекорды; фото не покидает устройство.
ОткрытьТабличка режима работыЧасы по дням недели, выходные и перерыв: одинаковые дни сворачиваются в «Пн–Пт», четыре оформления и палитра, А4, альбомный лист или А5, PNG и печать.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.