border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;Генератор невморфизма CSS создает элементы Soft-UI — стиль, при котором форма выглядит мягко экструдирована или вдавленной на задний план с использованием парных световых и темных теней. Вы устанавливаете цвет поверхности, расстояние тени, размытие, интенсивность контраста, радиус и форму, просматриваете предварительный просмотр и копируете точный CSS.
Нейморфизм работает, размещая две тени на элементе, который делит свой фон со страницей: более светлая тень в левом верхнем углу и более темная в правом нижнем углу. Получение двух цветов тени и смещений, чтобы они выглядели убедительно мягкими, привередливы вручную. Этот инструмент автоматически получает светлые и темные оттенки от вашего цвета поверхности, поэтому эффект всегда выглядит сбалансированным.
Все работает в вашем браузере. Выберите предустановку, отрегулируйте ползунки, переключитесь между плоскими, вогнутыми, выпуклыми и нажатыми фигурами и скопируйте CSS. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Выберите цвет вашего элемента, который должен соответствовать фону страницы, за которым он — невморфизм зависит от элемента и страницы, разделяющей один и тот же базовый цвет.
Отрегулируйте расстояние, размытие и интенсивность, чтобы контролировать, насколько сильно элемент поднимает страницу и насколько силен контраст света/темнота.
Переключитесь между плоским, вогнутым, выпуклым и нажатым. Нажатые используют вставные тени, чтобы выглядеть запавшими, а вогнутые и выпуклые добавляют тонкий градиент.
Скопируйте созданный блок — Border-Radius, Background и Pair Box-Thadow — и вставьте его на карту, кнопку или панель.
Светлые и темные оттенки теней являются результатом вашего цвета поверхности, поэтому эффект мягкого интерфейса всегда выглядит сбалансированным без ручной настройки.
Плоская, вогнутая, выпуклая и прессованная крышка приподнятая и затонувшая, с нажатой с использованием вставных теней и вогнутой/выпуклой, добавляющей тонкий градиент
Ползунки для тени, размытия, интенсивности контраста и радиуса углов позволяют вам набирать эффект от едва до драматического
Предварительный просмотр сидит на соответствующем фоне, поэтому мягкие тени читаются правильно, обновляясь мгновенно по мере редактирования.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius — then copy production-ready CSS.
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!