CSS 陰影

陰影可表達層次，但手寫多段數值繁瑣。可組合多層、切換內陰影呈現按下狀態，並以半透明或 `color-mix()` 貼近設計符號，減少在開發者工具中反覆微調。

使用方法

  1. 設定主陰影層的水平/垂直偏移、模糊半徑與擴散半徑。
  2. 選擇半透明顏色；複製層次以區分環境光與主光，層次更自然。
  3. 複製合併後的宣告到樣式表，並於淺色/深色主題下核對對比與 `:focus-visible` 外框，滿足無障礙要求。

常見問題

何時使用 inset（內陰影）？
內陰影表示元素壓入表面，常見於輸入框凹槽、開關軌道等。外陰影表示「浮起」；疊加時避免模糊過大導致灰霧。
模糊半徑過大是否影響效能？
極大模糊在低階手機上會消耗 GPU。優先採用設計體系中的層次權杖，或改以在偽元素上過渡透明度，而非劇烈拉長模糊。
動畫中如何平順過渡陰影？
模糊過渡成本較高，常改過渡 `transform`/`opacity` 或改用 `filter: drop-shadow()`；與團隊動效規範一致。

CSS 阴影生成器

自由调配多图层阴影，支持内阴影及高级不透明度微调，实时输出 CSS box-shadow 及 Tailwind 样式代码。

分享工具與即時狀態

您可以複製本頁的即時配置連結，或將此工具分享給您的同事與好友。

shadow_layers.yaml
图层堆栈管理
#1外阴影 (0px, 10px)
#2外阴影 (0px, 8px)
shadow_parameters.conf
> 正在编辑激活图层：#1
阴影类型
X 轴偏移 (Offset X)0 px
Y 轴偏移 (Offset Y)10 px
模糊半径 (Blur Radius)25 px
扩散距离 (Spread Radius)-5 px
阴影颜色
#000000
不透明度10%
shadow_render_view.bin
Preview Box
Radius: 24px
box_shadow_styles.css
标准 CSS 代码
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.1),
  0px 8px 10px -6px rgba(0, 0, 0, 0.1);
Tailwind CSS 类名
shadow-[0px_10px_25px_-5px_rgba(0,0,0,0.1),0px_8px_10px_-6px_rgba(0,0,0,0.1)]
卡片圆角 (Border Radius)24 px
卡片填充色
#FFFFFF