跳至正文

CSS陰影生成器

可視化創建CSS box-shadow和text-shadow並複製代碼的免費線上工具。

Box Shadow

陰影類型

陰影層

層 1
10%

CSS 代碼

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

預設陰影

主要功能​

  • 2種類型: Box Shadow、Text Shadow
  • 即時預覽: 立即查看更改
  • 多層疊加: 添加最多5個陰影層
  • 精細控制: X/Y偏移、模糊、擴散、顏色、透明度
  • Inset支援: 內部陰影效果
  • 預設: 6個陰影預設
  • 一鍵複製: 立即複製CSS代碼

陰影類型​

1. Box Shadow​

box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);

為元素外部或內部添加陰影效果。

使用場景:

  • 卡片陰影
  • 按鈕立體感
  • 模態框背景
  • 圖片邊框效果

2. Text Shadow​

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

為文字添加陰影效果。

使用場景:

  • 標題文字
  • Logo文字
  • 霓虹效果
  • 立體文字

瀏覽器兼容性​

Box Shadow​

  • ✅ Chrome 10+
  • ✅ Firefox 4+
  • ✅ Safari 5.1+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ 所有移動瀏覽器

Text Shadow​

  • ✅ Chrome 4+
  • ✅ Firefox 3.5+
  • ✅ Safari 4+
  • ✅ Edge 12+
  • ✅ IE 10+
  • ✅ 所有移動瀏覽器

相關工具​