Генератор CSS-неоморфізму

Що таке Генератор CSS-неоморфізму?

Генератор CSS-неоморфізму — це безкоштовний візуальний інструмент для створення вигляду Soft-UI (неоморфізм), за якого елементи здаються виступаючими з поверхні або вдавленими в неї завдяки двом зміщеним тіням одного відтінку. Його створено для UI-дизайнерів і фронтенд-розробників, яким потрібна ця тонка, відчутна глибина без ручного підбору парних box-shadow. Задайте базовий колір за допомогою піпетки або поля для шістнадцяткового значення, перемикайте Форму між Плоскою, Увігнутою та Опуклою й регулюйте Відстань (наскільки зміщено тіні), Інтенсивність (силу контрасту світла й тіні), Розмиття (мʼякість) і Радіус (заокруглення кутів). Інструмент виводить із вашого базового кольору світліший відблиск і темнішу тінь та поєднує їх — за потреби накладаючи легкий градієнт для увігнутої та опуклої форм — в одне правило CSS, яке показується наживо на відповідному тлі й видається як код для копіювання.

Як користуватися Генератор CSS-неоморфізму

1. Виберіть базовий колір поверхні за допомогою зразка або ввівши шістнадцяткове значення, наприклад #e0e5ec.
2. Виберіть Форму: Плоска — для піднятої панелі, Увігнута — для вдавленої заглибини, Опукла — для куполоподібного горбика.
3. Задайте Відстань, щоб відсунути світлу й темну тіні далі назовні для глибшого виступу.
4. Налаштуйте Інтенсивність, щоб зробити контраст відблиску й тіні сильнішим або мʼякшим.
5. Відрегулюйте Розмиття для мʼякших чи різкіших країв і Радіус для заокруглення кутів.
6. Перевірте живий попередній перегляд, потім скопіюйте згенерований CSS неоморфізму у свою таблицю стилів.

Приклади

колір #e0e5ec, форма Плоска, відстань 12, інтенсивність 15, розмиття 24, радіус 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

колір #e0e5ec, форма Увігнута, відстань 8, інтенсивність 15, розмиття 16, радіус 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

колір #3a3f47, форма Опукла, відстань 6, інтенсивність 20, розмиття 12, радіус 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Поширені запитання

Що таке неоморфізм?

Неоморфізм (або soft UI) — це стиль, за якого елементи здаються виступаючими з одноколірної поверхні або вдавленими в неї за допомогою двох зміщених box-shadow одного відтінку: світлішої вгорі ліворуч і темнішої внизу праворуч. Цей інструмент виводить обидві тіні з вашого базового кольору, тож вони завжди поєднуються з поверхнею.

Яка різниця між Плоскою, Увігнутою та Опуклою?

Плоска зберігає поверхню суцільного кольору, тож елемент виглядає піднятим над тлом. Увігнута додає легкий градієнт, що темнішає до верхнього лівого кута, через що здається вдавленою всередину. Опукла перевертає градієнт, щоб центр виглядав куполоподібним і піднятим. Світла й темна тіні лишаються незмінними; змінюється лише заливка поверхні.

Як працюють Відстань, Інтенсивність, Розмиття та Радіус?

Відстань — це зміщення обох тіней у пікселях: що більше значення, то далі елемент від поверхні. Інтенсивність визначає, наскільки світліші й темніші два кольори тіні порівняно з базовим. Розмиття помʼякшує краї тіні, а Радіус заокруглює кути. CSS оновлюється наживо в разі зміни будь-якого з них.

Який колір використати для тла?

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

Чи завантажуються мої дані кудись?

Ні. Генератор працює повністю у вашому браузері на JavaScript — ваш колір і налаштування ніколи не надсилаються на сервер, тож він працює конфіденційно й навіть офлайн після завантаження сторінки.