CSS漸層和玻璃效果設計工具
4px
25%
200px
200px
10px
1px
CSS 代碼
.glass-box {
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 10px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.gradient-preview {
background: linear-gradient(90deg, #000979 0%, #00024 35%, #0004ff 100%);
}
使用方法:
選擇並調整模糊、不透明度、顏色和邊框設置，以即時預覽效果。然後，您可以複製生成的 CSS 代碼以應用於您的項目。
使用步驟:
- 調整模糊度滑桿來改變效果的模糊程度。
- 使用不透明度滑桿來設置玻璃框的透明度。
- 選擇背景顏色和邊框顏色以匹配您的設計需求。
- 輸入寬度和高度來設置框的大小。
- 調整邊框圓角滑桿來改變邊框的圓角程度。
- 使用漸變色選擇器來設置漸變效果的起始、中間和結束顏色。
- 複製生成的 CSS 代碼並應用到您的網頁設計中。
適合誰使用:
本工具適合網頁設計師、前端開發人員以及任何希望輕鬆創建漂亮 CSS 效果的使用者。
更多網頁工具產生器
關於線上免費樣式設計器
此網站內所有樣式設計器和產生器工具均由天天瘋後製原創製作 所有的產生出來的樣式都可以商業所用，純屬娛樂好玩和增加靈感，若有疑問請諮詢專業人士。