Генератор на CSS Glassmorphism

Този инструмент изгражда CSS ефект на матово стъкло (glassmorphism), като комбинира полупрозрачен фон с backdrop-filter: blur() — плъзгайте плъзгачите над цветната визуализация, за да видите как стъкленото поле замъглява всичко зад себе си, след което копирайте CSS кода. Инструментът извежда и префикса -webkit-backdrop-filter, който Safari все още изисква за backdrop-filter.

Какво представлява този инструмент?

Glassmorphism е стил на потребителски интерфейс, при който елементът изглежда като матово стъкло: полупрозрачен фон позволява на цветовете зад него да прозират, докато backdrop-filter: blur() замъглява този фон, така че да се възприема като стъкло, а не като обикновен прозрачен панел. Тънък, полупрозрачен бордюр и заоблени ъгли обикновено допълват вида.

Този инструмент ви позволява да изградите ефекта визуално. Визуализацията е поставена върху движещ се градиентен фон именно за да се вижда замъгляването — glassmorphism изглежда правилно само върху нещо с цвят или детайли зад себе си, а не върху обикновена бяла страница. Регулирайте прозрачността на цвета на фона, силата на замъгляването, прозрачността на бордюра и радиуса на ъглите, след което копирайте генерирания CSS код.

Източник: Filter Effects Module Level 1, W3C — дефинира backdrop-filter, свойството, на което се основава този ефект.

Защо да го използвате?

Визуализация на живо върху цветен анимиран фон, така че наистина да виждате ефекта на матово стъкло, вместо да гадаете стойности за замъгляване на празен фон.
Пълен контрол върху прозрачността на фона, силата на замъгляването, прозрачността на бордюра и border-radius на едно място.
Автоматично извежда както backdrop-filter, така и префикса -webkit-backdrop-filter, за да не забравите поддръжката за Safari.
Работи изцяло във вашия браузър — нищо, което конфигурирате, не се качва никъде.
Безплатен, без регистрация, работи на мобилни устройства.

Как да го използвате

Изберете цвят на фона и регулирайте неговата прозрачност — по-ниска прозрачност (10–25%) изглежда като стъкло; по-висока прозрачност прилича повече на плътен оцветен панел.
Увеличете силата на замъгляването, за да замъглите това, което е зад елемента — точно това реално създава вида на матово стъкло, за разлика от самата прозрачност.
Регулирайте прозрачността на бордюра, за да добавите фин светъл ръб, който помага стъкленото поле да се възприема като отделна повърхност, вместо да се слива с фона.
Задайте border-radius за заоблени ъгли — полетата с glassmorphism почти винаги са заоблени, рядко имат остри ъгли.
Копирайте генерирания CSS код и го поставете в таблицата си със стилове. Не забравяйте, че елементът се нуждае от нещо с цвят или текстура зад себе си — glassmorphism е невидим върху равен фон с един цвят.

Пример

Вход

Фон: бял с 20% прозрачност · Замъгляване: 10px · Прозрачност на бордюра: 30% · Радиус: 16px

Резултат

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Класически стил на поле с матово стъкло, използван за панели за вход, навигационни ленти и джаджи в табла за управление върху цветен фон или снимка.

Поддръжка от Safari и браузъри

backdrop-filter се поддържа в актуалните версии на Chrome, Firefox, Edge и Safari, но исторически Safari изисква префикса -webkit-backdrop-filter заедно с непрефиксираното свойство, за да визуализира замъгляването — без него по-старите версии на Safari тихо игнорират замъгляването и показват само плоския прозрачен фон. Затова този инструмент винаги извежда и двете декларации.

Вижте документацията на MDN за backdrop-filter за актуални подробности относно съвместимостта с браузъри: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Защо на glassmorphism му трябва нещо зад него

backdrop-filter замъглява само това, което визуално се намира зад елемента — фоново изображение, градиент, друг оцветен елемент или съдържание, което се превърта отдолу. Върху обикновен бял или едноцветен фон няма какво да се замъгли, така че ефектът е невидим и елементът изглежда просто като леко оцветена, заоблена кутия. Винаги поставяйте елементи с glassmorphism върху градиент, снимка или друг детайлен фон, за да се вижда ефектът правилно.

Комбиниране с други CSS ефекти

Полетата с glassmorphism често комбинират и лека box-shadow отдолу за допълнителна дълбочина. Генерирайте CSS кода за матово стъкло тук, след което добавете мека сянка с генератора Box Shadow и приложете двете декларации върху един и същ елемент.

→ Генератор на Box Shadow · Генератор на Border Radius

Често задавани въпроси

Защо ефектът на стъкло не се показва на страницата ми?

backdrop-filter замъглява това, което е зад елемента. Ако елементът ви се намира върху обикновен бял или едноцветен фон, там няма нищо визуално интересно за замъгляване, така че той просто изглежда като слабо оцветена кутия. Поставете го върху градиент, изображение или друг детайлен фон, за да се вижда ефектът на матово стъкло.

Нужен ли ми е префиксът -webkit-backdrop-filter?

Да, ако искате ефектът да се показва надеждно в Safari. Този инструмент винаги извежда заедно стандартния backdrop-filter и версията с префикс -webkit-, тъй като исторически Safari се нуждае от префикса, за да приложи замъгляването.

Каква е разликата между прозрачността на фона и замъгляването?

Прозрачността на фона определя колко от избрания от вас оцветяващ цвят се вижда спрямо това колко от фона зад него прозира непроменено. Замъгляването определя доколко този видим фон е размазан/омекотен. Glassmorphism използва и двете заедно — известна прозрачност плюс известно замъгляване — вместо само едното от тях.

Мога ли да използвам backdrop-filter върху всеки елемент?

Да, но той засяга само това, което визуално се намира зад елемента в рендирането на страницата, а не собствените деца на елемента. Има и известна цена за производителността на някои устройства, когато се прилага върху много елементи или се анимира често, затова е най-добре да се използва за малък брой видни повърхности в интерфейса, като карти, модални прозорци или навигационни ленти, а не за десетки малки елементи.

Защо бордюрът ми едва се вижда?

Бордюрът в този инструмент използва полупрозрачно бяло, което е замислено да бъде фино — светъл ръб, който помага стъкленото поле да се възприема като отделна повърхност, без да изглежда като твърда, непрозрачна очертаваща линия. Увеличете плъзгача за прозрачност на бордюра, ако искате по-видим ръб.