Генератор CSS Neumorphism
Создайте мягкий UI CSS (neumorphic) — цвет фона плюс пара смещённых box-shadow, один светлее и один темнее, в поднятом (flat/convex) или вдавленном (concave) стиле — из базового цвета, расстояния, размытия и радиуса границы.
Ввод
Базовый цвет элемента и его окружения.
Насколько далеко светлая и тёмная тени простираются от элемента.
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-neumorphism-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#e0e5ec",
"style": "flat",
"distance": "20",
"blur": "60",
"borderRadius": "50"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-neumorphism-generator` tool (CSS Neumorphism Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-neumorphism-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS Neumorphism — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что он делает
Генератор CSS Neumorphism превращает средство выбора цвета и три ползунка в готовый блок CSS "мягкого UI". Neumorphism (смесь "new" и "skeuomorphism") — это тренд дизайна, где элементы интерфейса выглядят так, как будто они вылеплены из того же материала, что и фон — выступают из поверхности или вдавлены в неё — используя только цвет фона и пару смещённых теней. За эффектом нет никаких трюков с градиентом или графических активов: иллюзия создаётся полностью за счёт размещения одной тени, которая светлее фона (имитируя источник света), напротив той, которая темнее (имитируя отбрасываемую ей тень).
Свойства, которые оно генерирует
background: <color or gradient>;
border-radius: Npx;
box-shadow: Dpx Dpx Bpx <darker>, -Dpx -Dpx Bpx <lighter>;- background — ваш базовый цвет как есть для стиля Flat, или мягкий диагональный градиент между немного более светлым и немного более тёмным оттенком для Convex (поднятый) и Concave (вдавленный) — направление градиента меняется между ними, что делает один похожим на выпячивание, а другой — на западание.
- border-radius — скруглённые углы со слайдера Радиус границы. Neumorphic элементы почти всегда скруглены; острые углы разрушают иллюзию "вылепленного материала".
- box-shadow — две тени, смещённые слайдером Расстояние в противоположных направлениях: более тёмный оттенок в нижний правый угол (как если бы освещалось сверху слева) и более светлый оттенок в верхний левый угол. Обе имеют одинаковый радиус Размытия, поэтому они плавно переходят в фон по краям вместо чёрких линий тени.
Более светлые и тёмные оттенки получены из вашего базового цвета путём смещения каждого канала RGB в сторону белого или чёрного на фиксированную величину — та же математика осветления/затемнения, которую эффект использует с момента первоначальной популяризации "Neumorphism in User Interfaces" в 2019/2020.
Как его использовать
- Выберите Цвет фона — это основа каждой тени и градиента в выходных данных, полученных из неё, поэтому эффект лучше всего работает на среднем тоне с низкой насыщенностью (классическая neumorphic палитра — мягкий серый цвет вроде
#e0e5ec; очень тёмные или очень насыщенные цвета снижают контрастность, необходимую теням). - Выберите Стиль: Flat для однотонной панели с парой поднятых теней, Convex для добавления градиента, выглядящего выпячиванием наружу, или Concave для обращения этого градиента, чтобы панель выглядела вдавленной вовнутрь.
- Перетащите Расстояние, чтобы установить, насколько далеко светлая/тёмная тени простираются от элемента, и Размытие, чтобы управлять мягкостью их краёв — большие значения размытия с соответствующим расстоянием дают самый гладкий "вылепленный" вид.
- Установите Радиус границы для скругления углов панели.
- Скопируйте сгенерированный CSS и примените его к любому блочному элементу с фоном, совпадающим (или близким) к выбранному цвету — neumorphism правильно читается только когда окружение элемента совпадает с его базовым цветом, так как тени откалиброваны против него.
FAQ
Почему мой элемент выглядит плоским вместо "мягкого UI"? Фон родителя/страницы должен совпадать (или почти совпадать) с цветом, выбранным здесь. Neumorphism зависит от того, что элемент сливается со своим окружением, кроме двух тонких теней — поместите его на белую страницу с серым базовым цветом, и иллюзия разрушится.
Почему neumorphism считается риском для доступности? Весь эффект зависит от очень низкого контраста между элементом и его фоном, что именно то, от чего предупреждают руководства по доступности (как коэффициенты контраста WCAG). Используйте его для декоративных поверхностей и низкозначимого UI, а не для текста, кнопок или чего-либо, что пользователь должен различить с первого взгляда.
Могу ли я получить истинный вид "вдавленного" с помощью inset тени?
Стиль Concave этого генератора имитирует вдавленный вид обращением градиента фона вместо переключения на CSS inset тени. Если вам нужна буквальная inset тень, добавьте ключевое слово inset к каждому значению box-shadow в сгенерированном CSS.
Этот инструмент хранит или загружает мои выборы цветов? Нет. Всё выполняется локально в вашем браузере — ничто из того, что вы вводите, не отправляется на сервер и не сохраняется.