CSS 陰影產生器

產生多層 CSS box-shadow,提供即時預覽、內陰影切換與精細參數控制。

圖層1
產生多層 CSS box-shadow,提供即時預覽、內陰影切換與精細參數控制。
圖層設定
圖層 1
px
px
px
px
預覽
將 box-shadow 值複製到你的 CSS。
box-shadow
CSS 輸出
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

什麼是 box-shadow?

產生多層 CSS box-shadow,提供即時預覽、內陰影切換與精細參數控制。

box-shadow 是一個 CSS 屬性,用於在元素外部(或內部)繪製一或多個陰影。

每個陰影由水平/垂直位移、模糊半徑、可選的擴展值以及帶透明度的顏色組成;加上 inset 就會變成內陰影。

多個圖層用逗號分隔,可以疊加出層次感、發光或清晰的邊緣效果。

  • 小位移 + 大模糊可形成柔和的浮起感。
  • 更高不透明度 + 小模糊能得到更銳利的邊緣。
  • 外陰影配合內陰影可增強立體感。
  • 圖層數量盡量少,以獲得更好的效能。