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

Генератор нейморфизма CSS создает элементы мягкого пользовательского интерфейса - стиль, в котором форма выглядит мягко выдавленной или запрессованной на заднем плане с помощью парных светлых и темных теней. Вы устанавливаете цвет поверхности, расстояние между тенью, размытие, интенсивность контраста, радиус угла и форму, смотрите предварительный просмотр в реальном времени и копируете точный CSS.

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

Все работает в вашем браузере. Выберите предустановку, отрегулируйте ползунки, переключитесь между плоскими, вогнутыми, выпуклыми и нажатыми фигурами и скопируйте CSS. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.

Нейморфизм стоит использовать с ясными глазами о его главной слабости, которая является доступностью. стиль работает, размещая светлую тень и темную тень на поверхности почти того же цвета, что и его фон, поэтому край контроля определяется разницей в несколько процентов яркости. Это читается как элегантно для некоторых зрителей и как невидимо для всех с пониженной контрастной чувствительностью, на тусклом экране или на открытом воздухе. Это не удается WCAG 1.4.11, который требует соотношения 3:1 на границе интерактивного компонента. Обычный компромисс заключается в том, чтобы сохранить стиль декоративных поверхностей и придать подлинно интерактивным элементам реальную границу или четкое состояние фокусировки. Цвета теней здесь производны от цвета поверхности, поэтому темная поверхность создает правильно перевернутую пару, а не серую.