็ป็ๆๆ
็ๆ็ป็ๆๆCSSๆๆใ ๅ ่ดนๅจ็บฟไฝฟ็จ ็ป็ๆๆ๏ผๆ ้ๆณจๅ๏ผๅจๆต่งๅจไธญๅฟซ้ๅฎๅ จๅค็ใ
้ข่ง
็ป็ๆๆ
็ฐไปฃ็ฃจ็ ็ป็ๆๆ
่ฎพ็ฝฎ
CSS ไปฃ็
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
}็ป็ๆๆ ๅฏๅธฎๅฉไฝ ็ดๆฅๅจๆต่งๅจไธญๅค็้ข่ฒใ
่ฏฅๅทฅๅ ท้ๅ้่ฆๅฟซ้ๅฏ้ ็ปๆ็่ฎพ่ฎกๅธใๅผๅ่ ๅๅไฝ่ ใ
Supported formats
How it works
Step 1
ๆๅผ ็ป็ๆๆ
Step 2
่พๅ ฅๆๅฏผๅ ฅ้ข่ฒ
Step 3
ๅคๅถใๅฏผๅบๆๅค็จ็ปๆ
่ฆ้ฟๅ ็ๅธธ่ง้่ฏฏ
- ๅฟ่ฎฐๆฃๆฅๅฏนๆฏๅบฆๅฏ่ฝๅฝฑๅๅฏ่ฏปๆงใ
- ไฝฟ็จ่ฟๅค้ข่ฒไผ่ฎฉ่ฐ่ฒๆฟๆด้พๅบ็จใ
ไธไธๆๅทง
- ๅฐไธป่ฒไฟๅญไธบ CSS ๅ้ใ
- ๅๅธๅๅจๆต ่ฒๅๆทฑ่ฒๆจกๅผไธๆต่ฏ่ฐ่ฒๆฟใ
Privacy guaranteed: everything is processed locally in your browser.
ๅค็ไผๅฐฝๅฏ่ฝๅจๆต่งๅจๆฌๅฐๅฎๆใๆ ้่ดฆๆทใ
็จไบ้ข่ฒ้กน็ฎ็็ป็ๆๆ
็ๆ็ป็ๆๆCSSๆๆใ
ๆ ็ฒพๅบฆๆๅคฑ็็ป็ๆๆ
่ฝฌๆขๅบไบ็ฒพ็กฎๅผ๏ผHEXใRGBใHSLใOKLCH๏ผใๆ ่ง่ง่ฟไผผโโ้ข่ฒๅฎๅ จๅฟ ไบๆจ็่ฎพ่ฎกๆๅพใ
ๅ ่ดนๅจ็บฟ็ป็ๆๆ
ๆ ้ๆณจๅ๏ผๆ ้ไธ่ฝฝ่ฝฏไปถใ็ป็ๆๆ100%ๅ ่ดน๏ผๅฏๅจไปปไฝๆต่งๅจไธญไฝฟ็จใๅ ่ดนๆนๆกๆฏๅคฉๅฏไฝฟ็จ10ๆฌกใ
ๅฟซ้ๅฎๅ จ็็ป็ๆๆ
ๅค็็ดๆฅๅจๆต่งๅจๅ ๅฎๆ๏ผ้ๅบฆๆๅฟซใๆฐๆฎไธไผๅ้ๅฐๆๅกๅจ๏ผๆจ็้ข่ฒไธๆไปถไฟ็ๅจๆฌๅฐ่ฎพๅคไธใ
็จไบๅไบซไธๅไฝ็็ป็ๆๆ
ๅฐ็ปๆๅฏผๅบไธบ HEXใRGBใHSLใCSSใJSON๏ผๆไธ้ฎๅคๅถใ้ๅธธ้ๅไธๅข้ๅ ฑไบซ้ข่ฒ่ง่ๆ่ฎฐๅฝ่ฎพ่ฎก็ณป็ปใ
ๆข็ดขๆๆ้ข่ฒๅทฅๅ ท
ๅช้ๅ ๆฌก็นๅปๅณๅฏๆๅใ่ฝฌๆข้ข่ฒ๏ผ็ๆ่ฐ่ฒๆฟใๆธๅๅ WCAG ๅฏนๆฏๅบฆใ
Related tools
ๆๅๅๆ็จ
้่ฟ่ฏฆ็ปๆๅๅญฆไน ๅฆไฝไฝฟ็จๆไปฌ็ๅทฅๅ ทใ
glassmorphism๏ผeffectsๅฎ็จๆๅ
ๆฌๅฐๅๆๅ๏ผๅธฎๅฉไฝ ไฝฟ็จ glassmorphismใ็่งฃ effects ๆไฝณๅฎ่ทตๅนถ้ฟๅ ๅธธ่ง้่ฏฏใ
glassmorphism๏ผeffectsๅฎ็จๆๅ
ๆฌๅฐๅๆๅ๏ผๅธฎๅฉไฝ ไฝฟ็จ glassmorphismใ็่งฃ effects ๆไฝณๅฎ่ทตๅนถ้ฟๅ ๅธธ่ง้่ฏฏใ
glassmorphism๏ผeffectsๅฎ็จๆๅ
ๆฌๅฐๅๆๅ๏ผๅธฎๅฉไฝ ไฝฟ็จ glassmorphismใ็่งฃ effects ๆไฝณๅฎ่ทตๅนถ้ฟๅ ๅธธ่ง้่ฏฏใ