Реклама мешает? Идти Без рекламы Сегодня 

Генератор ньюморфизма CSS

ЦветРазработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Предустановленные стили

Предустановленный

Базовый цвет

Фон

Цвет фона элемента и его окружения

Форма

Тип фигуры

Размер элемента (в пикселях): 200

Радиус скругления (px): 50

Тень

Расстояние (в пикселях): 20 На какое расстояние тени выходят от элемента

Интенсивность (1-7): 15 Контраст между светлыми и темными тенями

Размытие (px): 60

Угол света: 145 Направление, откуда приходит источник света (в градусах)

ВЫХОД

Клиентская сторона

Живой просмотр

Сгенерированный CSS

Реклама · УДАЛИТЬ?

Гид

Генератор ньюморфизма CSS

Создавайте мягкие, выступающие «неуморфные» элементы интерфейса без ручной настройки двух противоположных теней. Выберите базовый цвет, выберите форму (плоская, вогнутая, выпуклая или вдавленная), перетащите слайдеры для расстояния, интенсивности, размытия и угла света, затем скопируйте сгенерированный CSS прямо в ваш проект.

Как использовать

Выберите цвет фона. Тот же цвет используется для элемента и окружающего канвас — именно это и делает эффект неуморфности.
Выберите форму: Плоский, Вогнутая (нежный впадин), Выпуклая (нежный выброс), или Внутренний отступ (вдавленная).
Настройте Расстояние и Угол света для установки направления тени.
Настройте Интенсивность и Размытие до тех пор, пока поверхность не будет казаться правильной.
Скопируйте CSS или переключитесь Показать HTML + CSS для получения готового фрагмента для вставки.

Возможности

Живой предварительный просмотр — при каждом изменении слайдера отображается обновлённый элемент сразу.
Пять встроенных шаблонов — Мягкий свет, Сильный свет, Мягкий темный, Сильный темный и Вдавленный.
Автоматически рассчитанные цвета теней — светлые и темные тени математически осветляются/темнеют от базового цвета, чтобы эффект всегда соответствовал.
Градиенты вогнутых и выпуклых форм — инструмент генерирует соответствующий линейный градиент для поверхности элемента в этих режимах.
Режим вогнутого (вдавленного) — для кнопок, которые выглядят «вдавленными» при нажатии.
Контроль угла света — поворачивайте виртуальный источник света от 0° до 360°.
Готовый CSS — чистый вывод с объявлениями обоих теней и фонового цвета поверхности.

 Часто задаваемые вопросы

Что такое неуморфность?

Неуморфность (также известная как мягкий интерфейс) — это визуальный стиль, при котором элементы выглядят как выступающие из или погружающиеся в фон. Эффект достигается с помощью двух теней одинакового размытия — одной светлой тени на стороне, обращённой к источнику света, и другой темной тени на противоположной стороне — обе тени отображаются на фоне, цвет которого совпадает с цветом самого элемента.
Почему элемент должен делиться цветом фона?

Неуморфность основывается на иллюзии, что форма является частью одной поверхности с фоном. Если элемент использует другой цвет, он перестаёт выглядеть как выступающий и вместо этого будет восприниматься как плоский элемент с двумя случайными тенями, что нарушает эффект.
Являются ли неуморфные интерфейсы доступными?

У них известные компромиссы в области доступности. Поскольку все элементы используют одинаковый цвет фона, контраст с текстом и другими элементами интерфейса часто очень низок, что может нарушать требования WCAG по контрасту и вызывать трудности у пользователей с экранными магнитами. Используйте неуморфность для декоративных поверхностей и сохраняйте критически важные элементы интерактивности с высоким контрастом.
Как угол света связан с смещением теней?

Два смещения теней рассчитываются из угла света с помощью простой тригонометрии: offsetX = cos(angle) × distance, offsetY = sin(angle) × distance. Противоположная тень размещается на отрицательных смещениях, чтобы светлая и темная стороны всегда находились на противоположных краях, что соответствовало бы реальному источнику света.