開發者免費本機執行
CSS 盒陰影產生器
使用即時預覽設計 CSS 盒陰影值——偏移、模糊、擴展、不透明度和內陰影。
預覽
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);調整滑塊以設計陰影 — 當看起來正確時複製 CSS。
關於CSS 盒陰影產生器
Handytool 的盒陰影產生器為您提供偏移、模糊、擴展、顏色和不透明度的滑桿——和一個即時預覽卡片，當您拖動時更新。切換內陰影，通過拾色器調整顏色，並將生成的盒陰影 CSS 宣告直接複製到您的樣式表中。整個工具在您的瀏覽器中執行；不上傳任何內容。
CSS 盒陰影產生器功能
- 01
每個參數都是滑桿
水平和垂直偏移、模糊半徑、擴展半徑和不透明度各有自己的滑桿加數字輸入——用拖動微調，然後用鍵盤調整像素精度。
- 02
支援內陰影
切換內陰影按鈕，在投影和內陰影之間切換——對於按下的按鈕、凹陷的輸入框和新擬物表面很有用。
- 03
顏色和不透明度分別控制
通過任何十六進位值在拾色器中選擇基礎顏色，然後獨立調整不透明度。輸出使用 rgba() 以便在複製 CSS 時顏色和 alpha 保持可讀。
CSS 盒陰影產生器常見問題
- 擴展值有什麼作用？
- 正擴展在套用模糊前在所有方向上擴大陰影；負擴展縮小它。當配對小模糊時對緊密、清晰的光暈很有用。
- 我可以新增多個陰影嗎？
- 此產生器輸出單個陰影宣告。要分層陰影，複製該值，然後在 CSS 中用逗號分隔貼上兩次——盒陰影接受逗號分隔清單。
- 為什麼我的內陰影不可見？
- 內陰影在元素內部繪製，所以它們需要背景顏色或內邊距才能可見。它們也不會在透明或零大小的元素上顯示。
- 預覽像素精確嗎？
- 是的——預覽在真實元素上使用實際的 CSS 盒陰影屬性，所以您看到的正是您的樣式表將呈現的樣子。