CSS Glassmorphism ģenerators

Šis rīks veido CSS matēta stikla (glassmorphism) efektu, kombinējot daļēji caurspīdīgu fonu ar backdrop-filter: blur() — velc slīdņus virs krāsainā priekšskatījuma, lai redzētu, kā stikla kartīte izplūdina visu aiz tās, tad kopē CSS. Tas arī izvada -webkit-backdrop-filter prefiksu, kas nepieciešams Safari, jo backdrop-filter tur to joprojām prasa.

Kas ir šis rīks?

Glassmorphism ir UI stils, kurā elements izskatās kā matēts stikls: daļēji caurspīdīgs fons ļauj izspīdēt cauri krāsām aiz tā, kamēr backdrop-filter: blur() izplūdina šo fonu, lai tas izskatītos kā stikls, nevis vienkāršs caurspīdīgs panelis. Plāna, daļēji caurspīdīga apmale un noapaļoti stūri parasti pabeidz šo izskatu.

Šis rīks ļauj šo efektu izveidot vizuāli. Priekšskatījums atrodas virs kustīga gradienta fona tieši tāpēc, lai izplūdums būtu redzams — glassmorphism pareizi izskatās tikai virs kaut kā ar krāsu vai detaļām aizmugurē, nevis pār vienkrāsainu baltu lapu. Pielāgo fona krāsas necaurredzamību, izplūduma stiprumu, apmales necaurredzamību un stūru rādiusu, tad kopē ģenerēto CSS.

Avots: Filter Effects Module Level 1, W3C — definē backdrop-filter, īpašību, uz kuras šis efekts ir balstīts.

Kāpēc to izmantot?

Tiešraides priekšskatījums virs krāsaina animēta fona, lai tu tiešām redzētu matētā stikla efektu, nevis minētu izplūduma vērtības uz tukša fona.
Pilna kontrole pār fona necaurredzamību, fona izplūduma stiprumu, apmales necaurredzamību un stūru rādiusu vienuviet.
Automātiski izvada gan backdrop-filter, gan -webkit-backdrop-filter prefiksu, lai tu neaizmirstu par Safari atbalstu.
Darbojas pilnībā tavā pārlūkā — nekas no tavas konfigurācijas nekur netiek augšupielādēts.
Bezmaksas, nav reģistrācijas, darbojas mobilajās ierīcēs.

Kā to lietot

Izvēlies fona krāsu un pielāgo tās necaurredzamību — zemāka necaurredzamība (10–25%) izskatās kā stikls; augstāka necaurredzamība izskatās vairāk kā ciets tonēts panelis.
Palielini izplūduma stiprumu, lai izplūdinātu to, kas ir aiz elementa — tas ir tas, kas patiešām rada matētā stikla izskatu, atšķirībā no pašas caurspīdīguma.
Pielāgo apmales necaurredzamību, lai pievienotu smalku gaišu malu, kas palīdz stikla kartītei izskatīties kā atsevišķai virsmai, nevis saplūst ar fonu.
Iestati border-radius noapaļotiem stūriem — glassmorphism kartītes gandrīz vienmēr ir noapaļotas, reti ar asiem stūriem.
Kopē ģenerēto CSS un ievieto to savā stilu failā. Atceries, ka elementam ir jābūt kaut kam ar krāsu vai tekstūru aizmugurē — glassmorphism ir neredzams pār vienkrāsainu, plakanu fonu.

Piemērs

Ievade

Fons: balts ar 20% necaurredzamību · Izplūdums: 10px · Apmales necaurredzamība: 30% · Rādiuss: 16px

Izvade

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;

Klasisks matēta stikla kartītes stils, ko izmanto pieteikšanās paneļos, navigācijas joslās un informācijas paneļu logrīkos virs krāsaina vai foto fona.

Safari un pārlūku atbalsts

backdrop-filter tiek atbalstīts pašreizējos Chrome, Firefox, Edge un Safari, taču Safari vēsturiski ir prasījis -webkit-backdrop-filter prefiksu līdzās neprefiksētajai īpašībai, lai renderētu izplūdumu — bez tā vecākas Safari versijas klusi ignorē izplūdumu un rāda tikai plakano caurspīdīgo fonu. Šī rīka izvadē tāpēc vienmēr ir abas deklarācijas.

Skati MDN backdrop-filter dokumentāciju par aktuālo pārlūku saderību: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Kāpēc glassmorphism vajag kaut ko aiz sevis

backdrop-filter izplūdina tikai to, kas vizuāli atrodas aiz elementa — fona attēlu, gradientu, citu krāsainu elementu vai saturu, kas ripo apakšā. Pār vienkāršu baltu vai vienkrāsainu fonu nav nekā, ko izplūdināt, tāpēc efekts ir neredzams, un elements izskatās vienkārši kā nedaudz tonēta, noapaļota kastīte. Vienmēr novieto glassmorphism elementus pār gradientu, foto vai citādi noslogotu fonu, lai efekts būtu redzams.

Kombinēšana ar citiem CSS efektiem

Glassmorphism kartītes bieži kombinē ar smalku box-shadow apakšā papildu dziļumam. Ģenerē matēta stikla CSS šeit, tad pievieno mīkstu ēnu ar Box Shadow ģeneratoru un pielieto abas deklarācijas tam pašam elementam.

→ Box Shadow ģenerators · Border Radius ģenerators

Biežāk uzdotie jautājumi

Kāpēc stikla efekts neparādās manā lapā?

backdrop-filter izplūdina to, kas atrodas aiz elementa. Ja tavs elements atrodas virs vienkārša balta vai vienkrāsaina fona, nav nekā vizuāli interesanta, ko izplūdināt, tāpēc tas izskatās tikai kā nedaudz tonēta kastīte. Novieto to virs gradienta, attēla vai cita detalizēta fona, lai matētā stikla efekts būtu redzams.

Vai man vajadzīgs -webkit-backdrop-filter prefikss?

Jā, ja vēlies, lai efekts uzticami renderētos Safari. Šis rīks vienmēr izvada gan standarta backdrop-filter, gan -webkit- prefiksēto versiju kopā, jo Safari vēsturiski ir prasījis prefiksu, lai pielietotu izplūdumu.

Kāda ir atšķirība starp fona necaurredzamību un izplūdumu?

Fona necaurredzamība kontrolē, cik daudz no izvēlētās tonējuma krāsas ir redzams pretstatā tam, cik daudz no aizmugures izspīd nemainīts. Izplūdums kontrolē, cik ļoti šis redzamais fons tiek izsmērēts/mīkstināts. Glassmorphism izmanto abus kopā — nedaudz caurspīdīguma plus nedaudz izplūduma — nevis tikai vienu no tiem.

Vai varu izmantot backdrop-filter jebkuram elementam?

Jā, taču tas ietekmē tikai to, kas vizuāli atrodas aiz šī elementa lapas renderējumā, nevis paša elementa bērnelementus. Tam arī ir veiktspējas izmaksas dažās ierīcēs, ja tas pielietots daudziem elementiem vai bieži animēts, tāpēc labāk to izmantot nelielam skaitam nozīmīgu UI virsmu, piemēram, kartīšu, modāļu vai navigācijas joslu, nevis desmitiem mazu elementu.

Kāpēc mana apmale ir tikko redzama?

Šī rīka apmale izmanto daļēji caurspīdīgu baltu krāsu, kas ir domāta smalka — gaiša mala, kas palīdz stikla panelim izskatīties kā atsevišķai virsmai, neizskatoties pēc cietas, necaurspīdīgas kontūras. Palielini apmales necaurredzamības slīdni, ja vēlies redzamāku malu.