CSS 文字陰影產生器

CSS 文字陰影產生器是 CSS 文字陰影屬性的視覺編輯器。 您使用滑桿調整水平偏移、垂直偏移、模糊半徑、顏色和不透明度，然後在範例文字上觀看效果渲染，然後複製確切的 CSS。 無需猜測像素值並刷新您的頁面，而是直接塑造陰影並閱讀它產生的程式碼。

無論您搜尋 CSS 文字陰影產生器、文字陰影產生器 CSS 工具還是 CSS 陰影文字產生器,輸出都是相同的單一聲明。按一下硬預設,產生的 CSS 框顯示文字陰影:2px 2px 0px #00000099;這是一個不透明度為 60% 的黑色層,不透明度寫入最後兩個十六進位數字。按一下 Neon Glow,您將獲得 7px、14px 和 28px 模糊的三個逗號分隔層。複製 CSS 複製整行,包括分號。

文字陰影屬性比框陰影更簡單 - 它沒有擴展半徑,也沒有插入關鍵字 - 但分層才是它變得強大的地方。單一聲明可以堆疊多個陰影,每個陰影都有自己的偏移、模糊和顏色。堆疊層是建立霓虹燈、硬輪廓、復古 3D 刻字、凸版壓花效果和長平面陰影的方式。手動編寫這些內容非常繁瑣,因此此工具可以管理這些圖層並以正確的油漆順序輸出規格有效、逗號分隔的聲明。

一切都發生在您的瀏覽器中。 選擇像 Neon Glow 或 Outline 這樣的預設，調整每一層，在明暗背景之間切換預覽，編輯範例文字，然後複製 CSS。 沒有帳戶，沒有上傳，一旦頁面載入，它就會繼續離線工作。

層序從前到後從前到後運行,因此首先列出的陰影位於頂部。這就是輪廓發揮作用的原因:四個小陰影在每個方向上偏移一個像素,堆疊起來,近似於 CSS 沒有直接屬性的筆畫。模糊半徑是渲染成本昂貴的部分,並且在捲軸上重新繪製幾個大模糊的文字是低功率設備出現卡紙的常見原因。陰影永遠不會影響佈局,因此它們可能會溢出其框並被隱藏溢出的父級剪裁。