VUREXVUREX
CSS Tool

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

Генерируйте красивые неоморфные CSS-тени с предпросмотром в реальном времени. Настраивайте цвета, формы, размытие, расстояние и интенсивность. Готовый CSS-код — 100% бесплатно и на стороне клиента.

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

#e0e0e0
150px
50300
10px
150
50%
10100
20px
180
30px
0150

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

border-radius: 30px;
  background: #e0e0e0;
  box-shadow: 10px 10px 20px #a8a8a8,
             -10px -10px 20px #e9e9e9;

Об этом инструменте

  • Предпросмотр обновляется в реальном времени при изменении настроек
  • Цвета теней автоматически вычисляются из цвета фона
  • Четыре режима формы: Плоский, Вогнутый, Выпуклый и Вдавленный
  • Полностью бесплатно, без регистрации и ограничений

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

Неоморфизм (или soft UI) — это стиль дизайна, который создаёт мягкий, рельефный вид с помощью тонких теней и бликов. Элементы выглядят выдавленными или вдавленными в фон, создавая тактильный 3D-эффект с помощью CSS box-shadow и градиентов.

Цвета теней автоматически вычисляются из выбранного цвета фона. Более светлый оттенок создаётся для тени-блика, а более тёмный — для основной тени. Ползунок интенсивности контролирует степень отличия оттенков от цвета фона.

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

Да, Генератор неоморфизма VUREX полностью бесплатный без регистрации. Создавайте сколько угодно неоморфных дизайнов и копируйте CSS прямо в свои проекты.