CSS 陰影產生器
免費線上 CSS box-shadow 產生器。視覺化建立精美陰影，可調整偏移、模糊、擴展、顏色和內陰影。即時預覽，即時複製程式碼。
什麼是 CSS box-shadow？
CSS box-shadow 是一個 CSS 屬性，用於在元素框架周圍新增陰影效果。它允許你透過指定偏移、模糊半徑、擴展半徑和顏色值來建立投影、內陰影和多層陰影。
box-shadow 有哪些參數？
box-shadow 屬性接受多個值：水平偏移（X）、垂直偏移（Y）、模糊半徑、擴展半徑、顏色以及可選的 inset 關鍵字。你還可以用逗號分隔指定多個陰影。
inset 關鍵字是什麼？
inset 關鍵字將陰影從外部陰影（投影）變為內部陰影。當指定 inset 時，陰影會繪製在元素邊框內部而不是外部，產生內嵌效果。
什麼是模糊半徑？
模糊半徑決定陰影邊緣的模糊程度。值為 0 時建立清晰、堅實的邊緣。較大的值會建立更擴散、更柔和的陰影，從元素延伸得更遠。
什麼是擴展半徑？
擴展半徑擴大或縮小陰影尺寸。正值使陰影比元素更大，負值使陰影更小。這會影響套用模糊之前的陰影大小。
如何建立多重陰影？
你可以透過用逗號分隔每個陰影定義來建立多重陰影。每個陰影可以有不同的偏移、模糊、擴展和顏色值。陰影按宣告順序套用，第一個陰影在最上層。
可以使用 RGBA 顏色嗎？
可以，你可以使用任何 CSS 顏色格式，包括 RGBA、HSLA、HEX 或命名顏色。RGBA 和 HSLA 特別適合建立與背景自然融合的半透明陰影。
如何複製生成的 CSS 程式碼？
只需點擊產生器介面中的「複製程式碼」按鈕。CSS 程式碼將被複製到剪貼簿，可以直接貼上到樣式表或 HTML 檔案中。
box-shadow 在所有瀏覽器中都支援嗎？
是的，box-shadow 在所有現代瀏覽器中都受支援，包括 Chrome、Firefox、Safari、Edge 和 Opera。自 2011 年以來它一直是 CSS3 的一部分，具有出色的瀏覽器相容性。
box-shadow 會影響效能嗎？
box-shadow 對現代瀏覽器的效能影響很小。但是，在許多元素上使用具有大模糊半徑的多個複雜陰影可能會影響渲染效能，尤其是在行動裝置上。
box-shadow 的常見用途有哪些？
常見用途包括建立卡片懸浮效果、為按鈕新增深度、建立內嵌表單欄位、實現 Material Design 陰影效果，以及在重疊元素之間新增視覺分隔。
可以動畫化 box-shadow 嗎？
可以，box-shadow 可以使用 CSS 過渡或動畫進行動畫化。但是，動畫化 box-shadow 可能會消耗較多效能。為了獲得更好的效能，考慮使用偽元素配合不透明度過渡。
如何使用CSS 陰影產生器
告別盲猜數值，用這款工具直覺地設計 CSS box-shadow。產生器在瀏覽器中本地執行，你輸入的任何內容都不會被上傳。
- 調整 H-Offset 和 V-Offset，讓陰影在水平與垂直方向移動。
- 增大 Blur 讓邊緣更柔和，調整 Spread 放大或縮小陰影範圍。
- 選擇 Color 並調節 Opacity，讓陰影更自然、更有層次。
- 勾選 Inset 可將陰影改為繪製在元素內部。
- 從預覽中複製最終產生的 box-shadow 規則，貼到樣式表裡。
較小的 Blur 配上稍大的正值 V-Offset，可以在元素正下方形成貼近真實的接觸陰影，特別適合卡片與按鈕。
相關工具
- CSS圓角產生器 視覺化CSS圓角產生器，獨立調整每個角的圓角半徑，即時預覽並立即複製產生的CSS程式碼。
- CSS 漸層產生器 視覺化建立精美 CSS 漸層。產生支援多色標、自訂角度和位置的線性、徑向和錐形漸層。即時複製可投入生產的 CSS 程式碼。
- CSS Grid產生器 免費線上視覺化CSS Grid產生器，即時預覽。互動式建立響應式網格佈局，一鍵匯出可用的CSS程式碼。
- CSS Flexbox產生器 視覺化CSS Flexbox產生器,即時預覽。調整Flex屬性,即時取得可用的CSS程式碼。
- 創意圓角產生器 免費線上創意圓角產生器。拖曳 8 個控制點或選擇 blob 預設，快速建立有機 CSS 形狀並複製 border-radius 程式碼。
- 顏色轉換器 免費線上顏色轉換器。即時轉換 HEX、RGB、HSL、HSV 格式，附視覺化拾色器。100% 隱私保護，瀏覽器本地運行。
- CSS 緩動函數產生器 免費線上 CSS 緩動產生器。在互動曲線上拖曳 cubic-bezier 控制點，內建 18 種預設，小球循環動畫即時對比，一鍵複製 timing function。
- CSS 文字陰影產生器 免費線上 CSS text-shadow 產生器。多層陰影可調偏移、模糊、顏色與透明度，內建霓虹、3D、復古、光暈等預設，即時預覽並一鍵複製程式碼。