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

Генерируйте CSS мягкого интерфейса (neumorphism): светлая и тёмная тени из базового цвета, плоская, вогнутая, выпуклая и вдавленная форма, 4 источника света.

Настройки неоморфизма

Базовый цвет

Форма

Источник света

Расстояниеpx

Размытиеpx

Интенсивность

Радиусpx

Размерpx

#ffffff#b0b0b0

Светлая и тёмная тени получаются из базового цвета: его светлота в OKLCH повышается и понижается на величину интенсивности. Используйте тот же цвет для фона страницы.

Предпросмотр

CSS-код

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

Что такое Генератор неоморфизма?

Создаёт мягкий интерфейс, в котором элемент выглядит выдавленным из страницы (или вдавленным в неё). Из базового цвета вычисляются более светлый и более тёмный цвета тени, которые объединяются в две противоположные box-shadow, с необязательной градиентной заливкой для вогнутых и выпуклых поверхностей.

Как пользоваться Генератор неоморфизма

Введите базовый цвет (используйте тот же цвет для фона страницы).
Выберите форму: плоская, вогнутая, выпуклая или вдавленная.
Выберите направление источника света.
Настройте расстояние, размытие, интенсивность, радиус и размер предпросмотра.
Скопируйте CSS-код.

Пример

Ввод

Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px

Вывод

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

Тёмная тень смещена вниз и вправо, светлая вверх и влево, то есть в сторону источника света.

Когда использовать Генератор неоморфизма

Подходит для игривых дашбордов, элементов управления умного дома или музыкальных приложений и портфолио. Неоморфизм по своей природе малоконтрастен, поэтому не полагайтесь на него одного для важных кнопок и полей форм; добавляйте понятные подписи, значки или кольцо фокуса ради доступности.

Как работает Генератор неоморфизма

Светлый и тёмный цвета тени вычисляются в OKLCH: яркость базового цвета повышается и понижается на значение интенсивности, а тон и насыщенность сохраняются (с приведением к гамме sRGB), поэтому метод работает и для цветных и тёмных оснований. Тёмная тень смещается от источника света на заданное расстояние, а светлая к нему, с одинаковым размытием. Вдавленная форма использует две тени inset. Вогнутая и выпуклая добавляют linear-gradient, угол которого следует направлению света, с цветами светлее и темнее на треть интенсивности.