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

Овај алат гради CSS ефекат матираног стакла (glassmorphism) комбиновањем полупровидне позадине са backdrop-filter: blur() — превуците клизаче преко шареног приказа да видите како стаклена картица замућује све иза себе, а затим копирајте CSS. Такође генерише -webkit-backdrop-filter префикс који је потребан Safari-ју, пошто backdrop-filter и даље захтева тај префикс у њему.

Šta je ovaj alat?

Glassmorphism је стил корисничког интерфејса у ком елемент изгледа као матирано стакло: полупровидна позадина омогућава да се боје иза ње назиру, док backdrop-filter: blur() замућује ту позадину тако да делује као стакло, а не као обична провидна плоча. Танка, полупровидна ивица и заобљени углови обично употпуњују тај изглед.

Овај алат вам омогућава да визуелно направите тај ефекат. Приказ се налази изнад покретне градијентне позадине управо зато да би замућење било видљиво — glassmorphism делује исправно само изнад нечега што има боју или детаље иза себе, а не изнад равне беле странице. Подесите непровидност боје позадине, јачину замућења, непровидност ивице и радијус углова, а затим копирајте генерисани CSS.

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

Zašto ga koristiti?

Приказ уживо изнад шарене анимиране позадине, тако да заиста видите ефекат матираног стакла уместо да нагађате вредности замућења на празној позадини.
Потпуна контрола над непровидношћу позадине, јачином backdrop замућења, непровидношћу ивице и border-radius на једном месту.
Аутоматски генерише и backdrop-filter и -webkit-backdrop-filter префикс, тако да не заборавите подршку за Safari.
Ради у потпуности у вашем прегледачу — ништа што подесите се никуда не отпрема.
Бесплатно, без пријаве, ради и на мобилним уређајима.

Kako se koristi

Изаберите боју позадине и подесите њену непровидност — нижа непровидност (10–25%) делује као стакло; виша непровидност изгледа више као чврста обојена плоча.
Повећајте јачину замућења да замутите оно што је иза елемента — то је оно што заправо ствара изглед матираног стакла, за разлику од саме провидности.
Подесите непровидност ивице да додате суптилну светлу ивицу, што помаже да се стаклена картица доживи као засебна површина, а не да се стопи с позадином.
Подесите border-radius за заобљене углове — картице са glassmorphism ефектом готово увек имају заобљене, а ретко оштре углове.
Копирајте генерисани CSS и налепите га у своју стилску датотеку. Запамтите да елементу треба нешто са бојом или текстуром иза себе — glassmorphism је невидљив изнад равне позадине једне боје.

Primer

Unos

Позадина: бела са 20% непровидности · Замућење: 10px · Непровидност ивице: 30% · Радијус: 16px

Rezultat

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

Često postavljana pitanja

Зашто се ефекат стакла не приказује на мојој страници?

backdrop-filter замућује оно што је иза елемента. Ако се ваш елемент налази изнад обичне беле или једнобојне позадине, тамо нема ничег визуелно занимљивог за замућивање, па он једноставно изгледа као бледо обојена кутија. Поставите га изнад градијента, слике или друге разуђене позадине да би ефекат матираног стакла био видљив.

Да ли ми је потребан -webkit-backdrop-filter префикс?

Да, ако желите да се ефекат поуздано приказује у Safari-ју. Овај алат увек заједно генерише стандардни backdrop-filter и верзију са -webkit- префиксом, пошто је Safari-ју историјски био потребан префикс да би применио замућење.

Која је разлика између непровидности позадине и замућења?

Непровидност позадине контролише колико се види изабрана боја тона, а колико се оно што је иза ње види непромењено. Замућење контролише колико је та видљива позадина размазана/омекшана. Glassmorphism користи обоје заједно — одређену провидност плус одређено замућење — уместо само једног од њих.

Да ли могу да користим backdrop-filter на било ком елементу?

Да, али он утиче само на оно што се визуелно налази иза тог елемента у рендеровању странице, а не на децу самог елемента. Такође има трошак перформанси на неким уређајима када се примени на много елемената или често анимира, па се најбоље користи за мали број истакнутих површина корисничког интерфејса, попут картица, модалних прозора или навигационих трака, а не за десетине малих елемената.

Зашто је моја ивица једва видљива?

Ивица у овом алату користи полупровидну белу боју, што је намерно суптилно — светла ивица која помаже да се стаклени панел доживи као засебна површина, а да не изгледа као тврда, непровидна контура. Повећајте клизач непровидности ивице ако желите видљивију ивицу.