分類: 開發工具
CSS 文字陰影產生器
疊加多層 text-shadow 並複製 CSS
設定偏移量、模糊程度、顏色與透明度，即可從這一組基礎值產生多層的 text-shadow 宣告，附上即時預覽與複製完成 CSS 的按鈕。
陰影預覽
輸出
text-shadow: 1px 1px 2px rgba(23, 33, 28, 0.5), 1px 1px 4px rgba(23, 33, 28, 0.39), 2px 2px 6px rgba(23, 33, 28, 0.28);
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
單一一層 text-shadow 看起來只是扁平、邊緣生硬的輪廓，而柔和的發光或層層堆疊的陰影效果，需要好幾層在偏移量與模糊程度上逐漸縮小、透明度逐漸淡出的陰影。本工具會依你設定的基礎偏移量、模糊程度、顏色與透明度，推算出整組陰影堆疊，使用的正是 box-shadow 多層陰影產生器所採的相同分層技巧，讓你只需要考慮一層陰影的參數，而不用手寫好幾個以逗號分隔的陰影。
使用方式
- 設定要產生的層數，以及基礎偏移量與模糊程度。
- 選擇顏色與透明度。
- 檢視即時預覽，再複製 text-shadow 宣告。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 為什麼加入更多層會讓陰影變柔和？
- 每多一層都會朝文字方向縮小，同時透明度逐漸淡出，因此多層疊加起來會呈現柔和的漸層陰影，而不是同一個陰影的生硬複製。
- 會傳送任何內容到伺服器嗎？
- 不會。宣告是依你設定的數值在頁面內計算出來的，這也是預覽能即時更新的原因。
- 可以用來做霓虹燈或發光效果嗎？
- 可以。明亮的顏色搭配大模糊值與多層，會呈現發光效果；深色搭配小偏移量與低模糊值，則會呈現細緻的深度陰影。