Developer Tools
Web UtilitiesГенератор Glassmorphism
Генерируйте CSS для эффекта карточки из матового стекла с настраиваемым размытием, прозрачностью и границей. Предварительный просмотр в реальном времени и копирование готового CSS кода.
Настройки стекла
Предпросмотр и CSS код
.glass-card {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
}blur(12px)Похожие инструменты
Об этом инструменте
Как это работает
- Отрегулируйте интенсивность размытия для управления глубиной эффекта матового стекла
- Установите уровень прозрачности с помощью ползунка непрозрачности
- Выберите цвет и непрозрачность рамки для подсветки края стекла
- Включите или отключите тонкий градиент фона для придания глубины
- Выбирайте между тёмным и светлым стилями стекла
- Скопируйте сгенерированный CSS и вставьте его прямо в свой проект
Распространённые случаи использования
- Разработка современных UI-карточек с эстетикой матового стекла
- Создание оверлеев для секций hero на фотографических фонах
- Разработка модальных диалогов и всплывающих окон с глубиной
- Стилизация навигационных панелей и боковых панелей с эффектом стекла
- Создание элементов лендинга с премиальным видом
- Добавление визуальной глубины к дашбордам и аналитическим интерфейсам
Часто задаваемые вопросы
Что такое glassmorphism?
Glassmorphism — современный тренд UI-дизайна, создающий эффект матового стекла путём сочетания полупрозрачного фона, фильтра размытия фона, тонкой рамки и иногда мягкой тени. Это придаёт элементам многослойный, глубокий вид, популярный на лендингах, дашбордах и карточках.
Как работает CSS-свойство backdrop-filter?
Свойство CSS backdrop-filter применяет графические эффекты, такие как размытие, к области за элементом. В сочетании с полупрозрачным фоном это создаёт эффект матового стекла. Префикс -webkit-backdrop-filter необходим для полной поддержки Safari.
Какие браузеры поддерживают backdrop-filter?
backdrop-filter поддерживается во всех современных браузерах: Chrome, Edge, Firefox (v103+), Safari и Opera. Префикс -webkit- охватывает старые версии Safari. Internet Explorer не поддерживает это свойство. Сгенерированный CSS включает как стандартную, так и версию с префиксом для максимальной совместимости.
Какое значение размытия лучше всего использовать для эффекта glassmorphism?
Значение размытия от 8px до 20px обычно даёт наилучший вид матового стекла. Значения ниже 4px выглядят слишком резкими, а значения выше 30px могут казаться чрезмерно размытыми. Оптимальное значение зависит от сложности фона — подробные фоны выигрывают от более высоких значений размытия.
Почему эффект стекла не виден на сплошном белом фоне?
Glassmorphism требует красочного или сложного фона для отображения. Если фон за карточкой однотонно-белый, размытие и прозрачность не имеют видимого контента для смешивания. Используйте опции градиентного фона или изображения, чтобы добавить красочный фон к предварительному просмотру.
Как использовать сгенерированный CSS в своём проекте?
Скопируйте CSS-код с помощью кнопки «Копировать CSS» и вставьте его в таблицу стилей. Примените класс .glass-card к вашему HTML-элементу. Убедитесь, что родительский контейнер имеет красочный фон или позиционированное фоновое изображение за стеклянной карточкой, чтобы эффект отображался правильно.
В чём разница между прозрачностью стекла и прозрачностью рамки?
Прозрачность стекла управляет тем, насколько прозрачен сам фон карточки — меньшие значения позволяют больше фона просвечивать сквозь. Прозрачность рамки независимо управляет видимостью подсветки края карточки, которая обычно представляет собой полупрозрачную белую линию, придающую краю стекла реалистичный блеск.
Могу ли я добавить градиент к стеклянной карточке вместо сплошного цвета?
Да! Включите переключатель «Градиент фона» в настройках стекла. Затем вы можете выбрать два цвета и угол для создания линейного градиентного фона стеклянной карточки. Ползунок прозрачности применяется к обеим остановкам градиента, сохраняя прозрачность матового стекла.
Какие предустановленные стили доступны?
Инструмент включает шесть пресетов: Светлое стекло (классическое белое матовое), Тёмное стекло (тёмная полупрозрачная панель), Матовое (сильное размытие, высокая непрозрачность), Красочное (пурпурно-розовый градиентный стекло), Минималистичное (едва видимый стеклянный слой) и Яркое (голубо-бирюзовое стекло на ярком фоне).
Как предварительно просмотреть эффект стекла на собственном фоновом изображении?
Переключите переключатель «Сцена фона» на «URL изображения» и вставьте прямую ссылку на изображение. В предварительном просмотре ваше изображение будет отображаться как фон за стеклянной карточкой. Лучше всего работают публично доступные URL-адреса изображений.
Влияет ли glassmorphism на производительность?
backdrop-filter может быть интенсивным для GPU, особенно при высоких значениях размытия или множестве стеклянных элементов на одной странице. Для производительности держите значения размытия разумными (менее 20px), избегайте наложения многих стеклянных слоёв и тестируйте на устройствах с низкой мощностью.
Могу ли я использовать glassmorphism для кнопок и навигационных панелей?
Конечно. Glassmorphism хорошо работает на кнопках, навигационных панелях, боковых панелях, модальных окнах, подсказках и любом плавающем UI-элементе. Сохраняйте радиус рамки подходящим для типа элемента и обеспечивайте достаточный цветовой контраст между текстом и стеклянным фоном для удобочитаемости.