CSS 陰影產生器
透過即時滑桿調整偏移量、模糊、擴散、顏色、透明度與內陰影，在真實元素上預覽，並立即複製可用的 CSS。
即時預覽
即時預覽
CSS
box-shadow: —;
所有更新均在您的瀏覽器中即時完成——無需上傳、無需註冊、完全免費。
陰影圖層
px
px
px
px
陰影顏色
20%
元素與畫布
16px
預設
關於 CSS 陰影產生器
CSS 陰影產生器讓你以視覺化方式設計 box-shadow,不必再猜測程式碼中的數值。拖曳滑桿調整水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色與透明度——搭配內陰影開關——即時觀看實際元素更新。滿意之後,一鍵複製隨時可貼上的 CSS。
現代介面的陰影很少只有單一圖層。這個產生器支援堆疊多層陰影:新增、複製、隱藏或移除圖層,並可預覽單一選定圖層或所有圖層疊加的效果。在柔和寬廣的陰影下方疊一層貼近且深色的陰影,正是精緻卡片與按鈕呈現層次感的關鍵。
你也可以調整預覽元素本身的樣式——盒子顏色、邊框圓角與畫布背景——讓陰影能在貼近真實情境(包括深色表面)下被評估。可以從預設值開始,點擊「隨機圖層」尋找靈感,想重新開始時隨時重置。所有功能都在你的瀏覽器中執行。
如何使用 CSS 陰影產生器
- 調整水平偏移、垂直偏移、模糊、擴散、顏色與透明度的滑桿,若想要內陰影效果,可切換「內陰影」開關。
- 點擊「新增圖層」或「複製圖層」來堆疊陰影,並在「此圖層」與「所有圖層」預覽模式間切換,逐一微調每一層。
- 調整元素與畫布——盒子顏色、邊框圓角與背景——讓預覽符合你實際的設計。
- 套用預設值,或使用「隨機圖層」取得起始靈感,而不是從空白滑桿開始。
- 複製完整的 CSS 規則(或只複製數值),貼到你的樣式表中。
常見問題
模糊會柔化陰影的邊緣——模糊半徑越大,陰影越擴散柔和。擴散則是在模糊之前放大或縮小陰影的尺寸:正值會讓陰影超出元素範圍,負值則會把陰影往內縮,形成更緊實的陰影。
真實的層次感通常需要至少兩層陰影:一層較小、較深、緊貼元素以呈現接觸感,另一層較大、較柔和、較透明以呈現環境光。這個產生器會把任意數量的圖層堆疊成單一個以逗號分隔的 box-shadow 數值。
內陰影會繪製在元素內部而非後方,讓表面看起來像是被壓陷或凹陷。這常用於輸入欄位、凹槽區域以及按鈕的按下狀態。
可以。元素與畫布控制項可以讓你調整盒子顏色、邊框圓角與畫布背景,在複製 CSS 之前就能確認陰影在深色表面上是否依然清晰可辨。
是的,完全免費。預覽與產生的 CSS 都在你的瀏覽器中即時計算,無需註冊,建立陰影的數量也沒有限制。
熱門搜尋
css box shadow 產生器
box shadow css
線上陰影產生器
css 陰影製作
多層 box shadow
inset 陰影 css
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。