Генератор glassmorphism CSS
Создавайте матовые стеклянные карточки с предпросмотром.
Настройте размытие, прозрачность оттенка, скругление и рамку карточки glassmorphism, посмотрите её вживую на цветном фоне, затем скопируйте полный CSS.
Цвет фона
Оттенок стекла
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
Как создать glassmorphism
- Выберите цвет фона за стеклянной карточкой.
- Выберите цвет оттенка и задайте его прозрачность.
- Настройте размытие, прозрачность рамки и скругление ползунками.
- Скопируйте полученный CSS в свой проект.
Часто задаваемые вопросы
Что такое glassmorphism?
Это стиль интерфейса, имитирующий матовое стекло: полупрозрачная панель на цветном фоне, смягчная размытием фона.
Почему в CSS два свойства размытия?
Свойство с префиксом webkit сохраняет эффект в Safari и других браузерах, которым он нужен.
Работает ли backdrop-filter везде?
Поддерживается всеми современными браузерами. Очень старые браузеры покажут обычную полупрозрачную панель без размытия.