Генератор CSS-глассморфизма — Бесплатно Онлайн
Генерируйте эффект матового стекла с живым предпросмотром. Настройте размытие, прозрачность и рамку.
Who uses the Генератор CSS-глассморфизма?
- UI-разработчики, реализующие компоненты карточек из матового стекла для современных веб-интерфейсов.
- Дизайнеры, создающие макеты глассморфизма, соответствующие текущей эстетике macOS и Windows 11.
- Изучающие frontend, исследующие CSS backdrop-filter и современные эффекты прозрачности.
How the Генератор CSS-глассморфизма works
Настройте цвет оттенка и прозрачность, чтобы задать цвет и непрозрачность фона стекла.
Установите интенсивность размытия (backdrop-filter: blur) для эффекта глубины матового стекла.
Настройте радиус границы и непрозрачность границы для стиля краёв.
Скопируйте полный CSS-код, который включает версию с префиксом -webkit- для совместимости с Safari.
Tips & tricks
- Box-shadow в сгенерированном CSS фиксирован (мягкая рассеянная тень) — он не настраивается через ползунки, регулируются только оттенок, размытие, радиус границы и непрозрачность границы.
- Более высокие значения прозрачности (ближе к максимуму) делают эффект стекла более тонким; более низкие значения делают карточку более плотной.
- Всегда предпросматривайте ваш стеклянный элемент на реальном фоне, на котором он будет находиться — эффект выглядит очень по-разному на фото и на однотонном цвете.
- Копируйте обе строки — backdrop-filter и -webkit-backdrop-filter — Safari конкретно нуждается в версии с префиксом.
Frequently Asked Questions
Что такое глассморфизм?
Глассморфизм — это тренд UI-дизайна (популяризирован примерно с 2020 года), использующий элементы вроде матового стекла: полупрозрачные фоны, размытие фона и тонкие границы для создания глубины и слоистости. Популяризирован macOS Big Sur от Apple и Windows 11.
Какое свойство CSS создаёт эффект размытия матового стекла?
backdrop-filter: blur(10px) применяет размытие ко всему позади элемента. В сочетании с полупрозрачным background-color и лёгкой границей это создаёт эффект стекла — именно то, что контролируют ползунки этого инструмента.
Работает ли backdrop-filter во всех браузерах?
backdrop-filter поддерживается в Chrome, Edge и Safari (с префиксом -webkit-). Firefox добавил поддержку в версии 103. Вывод этого инструмента всегда включает и backdrop-filter, и -webkit-backdrop-filter для максимальной совместимости.
Какой фон нужен позади элемента с глассморфизмом?
Глассморфизм хорошо смотрится только на цветном, размытом или градиентном фоне — ему нужно что-то для размытия. На белом или однотонном фоне эффект размытия невидим. Превью инструмента использует градиентную сцену, чтобы это продемонстрировать.
Доступен ли глассморфизм?
Глассморфизм может иметь проблемы с контрастом — текст на прозрачном стекле поверх разных фонов может не соответствовать требованиям контраста WCAG. Всегда тестируйте с реальным фоновым изображением и убедитесь, что текст соответствует коэффициенту контраста 4,5:1.
Is my data safe when using the Генератор CSS-глассморфизма?
Completely safe. The Генератор CSS-глассморфизма processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Генератор CSS-глассморфизма output in commercial projects?
Yes. The Генератор CSS-глассморфизма is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Генератор CSS-глассморфизма follow official standards?
Yes. The Генератор CSS-глассморфизма is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.