Генератор CSS Glassmorphism
Создайте блок CSS "frosted glass" — полупрозрачный фон rgba(), размытие backdrop-filter (с префиксом -webkit-), мягкую белую границу и тонкую тень — из цвета, прозрачности, размытия и радиуса.
Ввод
Объединяется с цветом фона в значение rgba().
Используется для backdrop-filter и его префиксного двойника -webkit-.
Прозрачность белой границы шириной 1px панели.
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-glassmorphism-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"backgroundColor": "#ffffff",
"backgroundOpacity": "20",
"blurAmount": "10",
"borderRadius": "16",
"borderOpacity": "30"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-glassmorphism-generator` tool (CSS Glassmorphism Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-glassmorphism-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS Glassmorphism — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что это делает
Генератор CSS Glassmorphism превращает выбор цвета и четыре ползунка в готовый к вставке блок CSS "frosted glass". Glassmorphism — это популярный тренд дизайна UI — впервые популяризированный панелями frosted macOS, а позже Fluent Design Windows и бесчисленными интерфейсами панелей/карточек — где полупрозрачная панель лежит над красочным или занятым фоном, размытой ровно настолько, чтобы намекнуть на то, что находится позади, оставаясь читаемой. Внешний вид создается путем объединения нескольких CSS-свойств: полупрозрачного фона rgba(), размытия backdrop-filter, мягкой светлой границы, скругленного радиуса углов и тонкой тени падения для эффекта подъема.
Генерируемые свойства
background: rgba(r, g, b, a);
backdrop-filter: blur(Npx);
-webkit-backdrop-filter: blur(Npx);
border: 1px solid rgba(255, 255, 255, a2);
border-radius: Npx;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);- background — ваш выбранный цвет в сочетании с ползунком Прозрачность фона в значение
rgba(). Более низкая прозрачность позволяет большему того, что находится за панелью, светить сквозь. - backdrop-filter / -webkit-backdrop-filter — фактическое размытие, которое делает эффект похожим на "стекло". Обе строки всегда выбрасываются вместе; см. примечание о поддержке браузера ниже.
- border — фиксированная белая граница 1px, подкрашенная ползунком Прозрачность границы. Слабая светлая граница — это то, что продает внешний вид "pane of glass catching light"; сплошная граница выглядит как плоская карточка вместо этого.
- border-radius — скругленные углы от ползунка Border Radius. Стеклянные панели почти всегда скругленные, а не с острыми углами.
- box-shadow — фиксированная тонкая тень, которая поднимает панель над страницей без конкуренции с размытием.
Примечание о поддержке браузером
backdrop-filter хорошо поддерживается в современных Chrome, Edge и Firefox, но Safari исторически требовал префикса -webkit-backdrop-filter для рендеринга размытия вообще — вот почему сгенерированный CSS всегда включает оба объявления. Если вы удалите строку -webkit-, пользователи Safari могут увидеть плоскую полупрозрачную панель без размытия вместо эффекта frosted-glass. Также учтите: backdrop-filter размывает все, что находится позади элемента, поэтому эффект невидим, если только элемент не расположен над чем-то с текстурой или цветом — простой белый фон страницы его не покажет.
Как использовать
- Выберите Цвет фона и установите Прозрачность фона — вместе они становятся полупрозрачным заполнением rgba() панели.
- Перетащите Размытие (px) для управления тем, насколько frosted выглядит стекло; более высокие значения размывают фон за панелью сильнее.
- Установите Border Radius для степени скругления углов панели.
- Отрегулируйте Прозрачность границы, чтобы сделать слабую белую границу панели более или менее видимой.
- Скопируйте сгенерированный блок CSS и примените его к любому позиционированному элементу, который лежит над изображением, градиентом или другими элементами.
FAQ
Почему граница всегда белая?
Слабая полупрозрачная граница — это почти универсальное соглашение для glassmorphism — она имитирует то, как настоящее стекло ловит свет на его краях, независимо от собственного оттенка панели. Если вам нужна граница другого цвета, замените rgba(255, 255, 255, …) в выводе на свой цвет.
Почему размытие не отображается на моем элементе?
backdrop-filter размывает только контент, уже отрендеренный позади элемента — ему нужно что-то с деталями (изображение, градиент или другой UI) под ним, и сам элемент должен иметь прозрачный или полупрозрачный фон, чтобы этот контент светился. Полностью непрозрачный фон полностью портит эффект.
Могу ли я использовать темный цвет фона для внешнего вида "dark glass"?
Да — выберите темный цвет hex (например #000000) и низкую или среднюю прозрачность; граница остается белой для контраста с размытым темным фоном, что является стандартной обработкой темного режима glassmorphism.
Сохраняет ли этот инструмент или загружает что-либо? Нет. Все вычисления выполняются локально в вашем браузере — ваши значения цвета и ползункового элемента никогда не покидают ваше устройство.