Генератор неоморфизма: тени soft UI на CSS
Генератор неоморфизма создаёт парные светлые и тёмные значения box-shadow для soft-UI-вида, используя базовый цвет и ползунок интенсивности. Включите inset для вдавленного вида, затем сравните живой предпросмотр со сгенерированным выводом — они совпадают в точности. Сгенерируйте значения и скопируйте нужные для вашего интерфейса.
Генератор неоморфизма создаёт парные светлые и тёмные значения box-shadow для soft-UI-эффекта. Выберите базовый цвет и настройте ползунок интенсивности, чтобы сформировать результат. Этот браузерный генератор также позволяет переключиться на тень inset для вдавленного вида, с предпросмотром, в точности совпадающим со сгенерированным выводом.
Чтобы создать результат, задайте доступные параметры и сгенерируйте значения. Базовый цвет и интенсивность определяют парные тени, а параметр inset меняет вид на вдавленный стиль. Можно изучить предпросмотр и скопировать нужные значения; предпросмотр в точности отражает вывод.
Неоморфизм использует едва заметные светлые и тёмные тени, чтобы придать элементу интерфейса мягкий, объёмный вид. box-shadow описывает стилизацию тени, а базовый цвет даёт отправную точку для парных значений. Генерация пары помогает, когда хочется изучить soft-UI-вид, не составляя светлые и тёмные значения вручную.
Генератор неоморфизма работает полностью в вашем браузере. Ваш ввод обрабатывается на вашем устройстве, и ничего не загружается, не сохраняется и не отправляется на сервер. После загрузки страницы инструмент продолжает работать офлайн, поскольку у него нет зависимости от сервера.
Этот инструмент полезен разработчикам и DevOps-инженерам, стилизующим компоненты интерфейса, готовящим тестовые значения или сравнивающим приподнятый и вдавленный виды. Задайте параметры, изучите предпросмотр и скопируйте сгенерированные значения в свою работу.
Шаг 1: Выберите базовый цвет и настройте ползунок интенсивности, чтобы задать вид парных светлых и тёмных теней.
Шаг 2: Переключите параметр inset, если нужен вдавленный вид вместо стандартного приподнятого.
Шаг 3: Сгенерируйте значения теней с выбранными настройками.
Шаг 4: Сверьте предпросмотр со сгенерированным выводом; предпросмотр совпадает с выводом в точности.
Шаг 5: Скопируйте нужные значения для интерфейса, тестовых фикстур или другой работы по разработке.
Пример использования: Создавайте значения box-shadow для soft-UI-кнопки или карточки, используя её базовый цвет и выбранную интенсивность.
Пример использования: Используйте сгенерированные парные значения в тестах или фикстурах вместо ручного написания светлых и тёмных теней.
Пример использования: Получите согласованную пару светлых и тёмных значений теней вместо подбора каждого значения отдельно.
Пример использования: Сравните стандартный приподнятый вид с вдавленным видом inset при построении интерфейса.
Пример использования: Настройте интенсивность, чтобы изучить разные виды теней для компонента.
Пример использования: Скопируйте сгенерированные значения в свой workflow разработки после проверки совпадающего предпросмотра.