用 CSS 陰影打造立體層次
這個產生器的功能
CSS 陰影有兩種。box-shadow 會在 div、按鈕或卡片這類元素的矩形外框周圍畫出陰影,而 text-shadow 則把陰影鋪在文字的每個字後面。這個產生器提供兩者共用的視覺化編輯器:你用滑桿調整水平與垂直位移、模糊(blur)、擴散(spread)、顏色和不透明度,只要改動任一數值,預覽就立刻重繪。等到樣子滿意,對應的 CSS 就會直接產出,方便複製。
你不必憑感覺去猜像素數值,而是在實際的方塊、按鈕、卡片或標題上調整陰影,再讀回精確的 box-shadow 或 text-shadow 宣告。
什麼時候適合用
當你想讓元素看起來從頁面浮起,就用 box-shadow:例如卡片的 Material 風格立體感、輕輕懸浮的選單,或是按鈕被按下時的凹陷效果。text-shadow 則是排版的利器:在雜亂的背景上,用淡淡的陰影把標題襯托出來,或在品牌字後方加上帶顏色的光暈(glow)。
要重現既有設計也很快。先載入 Material、Raised、Floating 或 Glow 之類的預設當起點,再微調位移和不透明度,直到陰影與你參照的設計稿吻合為止。
範例:堆疊陰影
單一陰影可以這樣讀:box-shadow: 0 4px 6px rgba(0,0,0,0.1); — 沒有水平位移、向下 4px、模糊 6px,加上一層淡淡的半透明黑。想營造真正的立體感,就疊上兩層:一層緊貼元素、又窄又深的陰影,再加一層往外擴、又寬又柔的陰影。新增一個圖層後,工具會用逗號把它們接起來:box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);。每個圖層都保有各自的位移、模糊、擴散和顏色。
細節與特殊情況
Offset X 和 Y 會把陰影往右、往下移(負值則往左、往上),blur 讓邊緣變柔,spread 則在套用模糊之前放大或縮小陰影,而這個 spread 是 text-shadow 沒有的屬性。開啟 Inset 後,陰影會往內翻轉,呈現按下的按鈕和凹陷輸入框的樣子。文字陰影請維持淡雅:在文字後方放太強的模糊或太高的不透明度會傷害可讀性。滿意之後,一鍵複製 CSS,或下載後直接貼進你的樣式表。