Генератор неоморфизма
Выберите цвет поверхности, и генератор подберёт к нему светлую и тёмную тени, с которыми элемент выглядит выдавленным из фона или вдавленным в него. Меняйте форму, направление света, расстояние, размытие и силу эффекта, затем скопируйте CSS.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Выберите цвет поверхности. Лучше всего работают средне-светлые цвета: у чисто белого нет запаса для более светлой тени.
- Подберите расстояние, размытие и силу, пока глубина не будет выглядеть как надо.
- Выберите форму и направление света, затем скопируйте CSS.
Как это работает
В CSS две тени. Тёмная смещена на заданное расстояние от света, светлая — к нему. Вдавленная форма помещает обе внутрь элемента через inset. Выпуклая и вогнутая добавляют градиент по поверхности с половинной силой: у выпуклой освещённая сторона светлее, у вогнутой — темнее.
Разобранный пример
Поверхность #e0e5ec, расстояние 20 px, размытие 40 px, сила 15 %, свет сверху слева. Красный 224 × 0,85 = 190,4, зелёный 229 × 0,85 = 194,65, синий 236 × 0,85 = 200,6, после округления — #bec3c9; для светлой тени 224 × 1,15 и остальные каналы больше 255, поэтому она #ffffff. Получается:
box-shadow: 20px 20px 40px #bec3c9, -20px -20px 40px #ffffff;
Советы
- Размытие примерно вдвое больше расстояния даёт классический мягкий вид.
- Вдавленную форму используйте для переключателей и нажатых кнопок, плоскую или выпуклую — для карточек и кнопок в покое.
- На тёмных поверхностях уменьшайте силу: светлая тень там быстро становится заметной.
Частые вопросы
Что такое неоморфизм?
Стиль мягкого интерфейса (Soft UI), в котором элементы одного цвета с фоном и выделяются только двумя тенями — более светлой со стороны источника света и более тёмной с противоположной, — поэтому кажутся выдавленными из поверхности.
Как подбираются цвета теней?
Каждый канал цвета поверхности — красный, зелёный и синий — умножается на 1 + сила для светлой тени и на 1 − сила для тёмной, а затем ограничивается диапазоном 0–255. При силе 15 % из #e0e5ec получаются #ffffff и #bec3c9.
Почему фон должен быть того же цвета?
Эффект держится на том, что элемент и страница сделаны из одного материала. Ставьте CSS на элемент, у родителя которого такой же цвет фона, как в предпросмотре, иначе тени будут выглядеть как обычная отбрасываемая тень.
Удобен ли неоморфизм для людей с плохим зрением?
Низкий контраст — его слабое место. Кнопки, нарисованные одними мягкими тенями, бывает трудно разглядеть, особенно людям со слабым зрением. Добавляйте понятный текст или значки с достаточным контрастом и заметную обводку фокуса.