盒陰影產生器

拖曳滑桿調整偏移、模糊、擴散和顏色,疊加多層做出立體陰影,CSS 程式碼即時產生,隨時複製。

陰影圖層
圖層 1
CSS 程式碼
拖曳滑桿,調整你的陰影效果。

每一層陰影都在你的瀏覽器裡繪製,這裡設定的內容不會上傳到 BroBroGo。

常見問題

偏移、模糊、擴散這幾個值分別控制什麼?

偏移決定陰影往哪個方向移動,模糊讓邊緣變柔和,擴散則在模糊之前把陰影撐大或收縮。擴散設成負值能讓陰影往內縮,適合做貼合邊緣的緊湊陰影。

內嵌(inset)選項是做什麼的?

一般陰影落在元素外側,像卡片抬起時背後透出的光。打開內嵌後陰影會翻到元素內側,讓元素看起來像被按下去一樣,適合做凹陷的輸入框或按下狀態的按鈕。

為什麼要疊加不只一層陰影?

尺寸大一點,單層陰影看起來就會很平。真正有立體感的效果通常是一層貼近、深色的陰影,疊加一層柔和、範圍更大的陰影——加一層新的,分別調整兩層的數值就能做出來。

漸層產生器產生線性、放射或圓錐漸層,加入色標、調整方向,CSS 程式碼一鍵複製。圓角產生器拖曳滑桿分別調四個角的圓角,開橢圓模式還能捏出流動的異形(“blob”)形狀,CSS 程式碼即時產生,隨時複製。顏色轉換器HEX、RGB、HSL、HSV、CMYK、LAB 之間互轉,改任一欄,其餘幾種即時更新。對比度檢查器輸入文字色和背景色,立刻看出 WCAG 對比度,以及通過哪些 AA、AAA 等級。