跳至主要內容
Lizely

CSS 字元陰影生成器

調整單一 CSS 字元陰影的精確偏移、模糊、顏色，並提供即時預覽，然後複製驗證過的宣告。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.輸入一段簡短文字，類似最終標題或標籤。
  2. 2.調整水平和垂直偏移以及模糊半徑。
  3. 3.選擇陰影、文字和背景顏色，並檢視可讀性。
  4. 4.複製宣告，並在實際元件中測試對比與效能。

關於CSS 字元陰影生成器

CSS 字元陰影生成器提供一種受控的方式來建立一個可讀的字元陰影宣告。輸入預覽文字，設定水平和垂直偏移，選擇非負的模糊半徑，並選擇陰影、文字和背景顏色。預覽會套用正確的字元陰影值，此值會被複製到 CSS 中。此共享計算避免了常見生成器缺陷——即視覺樣本與剪貼簿輸出之間的偏差。周圍顏色的包含是因為相同的陰影在淺色、深色、飽和或圖案背景上可能呈現截然不同的效果。

前兩個長度會移動陰影離字元的距離。正的水平值向右移動，負值向左移動；正的垂直值向下移動，負值向上移動。模糊會軟化邊緣，根據 CSS 語法，模糊值不得為負數。零模糊會產生文字的硬複製，較大的模糊則會擴散出較柔和的輪廓。該工具支援從負一百到正一百像素的偏移，以及從零到一百像素的模糊，拒絕空值和非有限值，而非靜默轉為零。

所有顏色均使用完整的六位十六進位輸入。生成器僅輸出一層陰影，以確保結果易於審核。CSS 支援逗號分隔的多層陰影，但堆疊太多層會導致文字混濁、增加繪製工作量，並掩蓋原始字元形狀。若需要邊框效果，可考慮分層陰影，但使用描邊（stroke）、SVG 或其他設計處理方式可能更清楚地傳達訊息。請將複製的宣告整合至現有色彩標籤中，而非在元件庫中散佈原始值。

裝飾性陰影並非文字對比的替代方案。應以實際背景為基準測量前景文字，不應將陰影計入字元範圍內。強烈的偏移可能導致視覺重疊，大模糊則可能降低小字的清晰度。請檢查縮放、高對比、強制色彩模式、深色主題、截圖、列印以及文字可能穿過的每種背景。避免僅以陰影方向或顏色作為狀態提示。標題、按鈕和連結仍需具備語意結構與可見的焦點處理。

當應用於大段文字、多個重複節點或動態值時，字元陰影可能影響渲染成本。請限制層數，並避免連續動態模糊。該生成器刻意不包含字型家族、粗細、大小、行高、過渡與動畫，因為這些屬性屬於主機字型系統。測試最終字型：字形與粗細的變化會影響偏移的視覺效果，以及模糊的可讀性。預覽文字長度會被限制以確保樣本穩定且響應迅速。

所有處理皆在當前標籤的本機進行。值不會上傳或儲存，無需帳號，也無需額外依賴。產生的宣告遵循驗證過的 CSS 標準範圍，但無法保證其對特定產品的可訪問性、效能或相容性。請將其複製到實際元件中，驗證文字對比、效能，並測試代表性裝置與瀏覽器，必要時以現有標籤取代原始值。當字型載入後，請重新檢查結果，因為備用字型與最終字元的度量可能改變陰影的邊緣、間距與粗細感。

方法與來源

驗證必填預覽文字、有限制的有符號偏移、非負模糊以及三個六位數顏色；序列化一個標準文字陰影層並將該精確值套用至預覽。

常見問題

模糊半徑可以為負值嗎？
CSS 允許負偏移，但模糊半徑必須為零或更大，因此負模糊會被拒絕。
預覽是否能證明具有足夠的可訪問對比度？
沒有。應測試前景文字與每種實際背景的對比，並驗證縮放、主題及強制色彩模式下的結果。
我可以產生多個陰影層嗎？
此專注工具僅產生一個可追蹤的層。若需增加多個層，應謹慎操作，因為多層可能降低清晰度並增加繪製工作量。

相關工具

開發者工具 使用指南

查看全部