Генератор CSS glassmorphism

Генератор CSS glassmorphism

Создавайте готовый CSS для панели матового стекла или мягкой нейроморфной поверхности, не вводя никаких значений вручную. Выберите glassmorphism для полупрозрачной карточки, которая размывает то, что находится позади — эффект, используемый в современных панелях управления, формах входа и модальных окнах — или neumorphism для поверхности, которая выглядит так, как будто она сформирована из того же материала, что и ее фон, используя пару противоположных мягких теней вместо прозрачности.

Опции напрямую соответствуют свойствам, которые записывает инструмент. В режиме стекла прозрачность поверхности и сила размытия управляют альфа-фоном и размытием backdrop-filter, а толщина границы и яркость границы устанавливают тонкий полупрозрачный край, который сохраняет читаемость панели на фоне загруженного фона. Расстояние и мягкость тени формируют падающую тень под панелью, а переключатель формы переводит ее на встроенную тень для утопленного вида. В режиме neumorphism те же значения расстояния и мягкости тени создают светлую и темную тени, вычисляемые из цвета вашей поверхности, выступающие или нажатые в зависимости от выбранной формы. Скругление углов и вариант темного режима применяются к обоим стилям.

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

Все работает локально в вашем браузере по мере перемещения ползунков — никаких инструментов проектирования, никаких учетных записей и ничего не отправляется на сервер. Скопируйте CSS прямо в вашу таблицу стилей, загрузите его как файл .txt или отправьте вывод обратно во вход, чтобы продолжить его настройку.

FAQ