Генератор неоморфізму
Проєктуйте м’які опуклі неоморфні UI-поверхні з подвійними тінями й копіюйте CSS.
—
Тло полотна збігається з кольором елемента — саме це створює м’який, опуклий неоморфний вигляд.
Типово світла й темна тіні виводяться з базового кольору. Увімкніть, щоб задати їх самостійно.
Про Генератор неоморфізму
Генератор неоморфізму створює м’який «видавлений» вигляд у стилі soft UI: елемент виглядає видавленим із поверхні позаду нього — або вдавленим у неї. Виберіть один базовий колір, і інструмент обчислить усе інше, адже ефект працює лише тоді, коли елемент і його фон мають однаковий колір, а глибина повністю створюється двома протилежними тінями box-shadow.
Повзунки керують геометрією: розмір, радіус заокруглення, відстань тіней, їхня інтенсивність і розмиття. Чотири режими форми — flat, concave, convex і pressed — змінюють внутрішній градієнт і напрямок тіні, а вибір джерела світла переміщує відблиск у будь-який із чотирьох кутів, щоб елемент відповідав освітленню вашого дизайну.
За замовчуванням світлий і темний кольори тіні обчислюються з базового кольору, але ручний режим дозволяє задати обидва самостійно. Згенерований CSS — background, radius і подвійний box-shadow — доступний одним кліком.
Як використовувати Генератор неоморфізму
- Виберіть базовий колір — він застосовується як до елемента, так і до полотна позаду нього.
- Виберіть форму: flat, concave, convex або pressed.
- Задайте кут джерела світла, щоб керувати тим, де падає відблиск.
- Налаштуйте розмір, радіус заокруглення, відстань, інтенсивність і розмиття за допомогою повзунків.
- Увімкніть ручні кольори тіней, якщо хочете перевизначити обчислені світлі й темні відтінки.
- Скопіюйте CSS і вставте його у свій елемент.