Skip to main content

Генератор CSS Glassmorphism

Создавайте эффекты матового стекла с предпросмотром и CSS-кодом. Тонкая настройка прозрачности, размытия, рамки и тени.

Предпросмотр

Glassmorphism

Предпросмотр

Управление

10px
0.25
180%
0.18
16px
#ffffff

CSS-код

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
Поделиться
📖

Как использовать

Step 1

Настройте параметры

Настройте параметры

Настройте прозрачность, размытие и рамку

Step 2

Предпросмотр

Предпросмотр

Просматривайте эффект стекла в реальном времени

Step 3

Скопируйте

Скопируйте

Скопируйте CSS-код для использования

Возможности

Управление размытием

Настройка степени размытия backdrop-filter

Настройка фона

Настройка фонового изображения или цвета

Рамка и тень

Настройка рамки и тени в стиле стекла

FAQ

Тренд в дизайне интерфейсов с эффектом полупрозрачного матового стекла.

🔗Похожие инструменты

🎨
Инструменты для дизайна

Конвертер цветовых кодов

Конвертация между цветовыми кодами HEX, RGB и HSL. Используйте палитру цветов и предпросмотр в реальном времени для интуитивного выбора цвета.

🎨
Инструменты для дизайна

Палитра цветов

Выбирайте цвета с помощью цветового колеса и ползунков. Получайте и копируйте цветовые коды в форматах HEX, RGB и HSL.

🎨
Инструменты для дизайна

Извлечение цветов из изображения

Автоматическое определение доминирующих цветов изображения и генерация цветовой палитры. Также можно нажать на любую точку изображения для выбора цвета.

🎯
Инструменты для дизайна

Определение среднего цвета изображения

Вычисление среднего цвета всего изображения или выделенной области. Полезно для подбора цветовых схем или фоновых цветов миниатюр.

🌈
Инструменты для дизайна

Генератор CSS-градиентов

Визуально создавайте CSS-градиенты с помощью перетаскивания. Поддержка линейных, радиальных и конических градиентов с предустановками.

🔲
Инструменты для дизайна

Генератор CSS Box Shadow

Визуально создавайте CSS box-shadow с помощью ползунков. Поддержка нескольких теней и внутренних теней.