文字特效產生器

📖 工具介紹

文字特效產生器是一款面向網頁設計師與海報製作者的 CSS 文字樣式工具。很多人在做標題時都有過這樣的經歷：想要霓虹發光字、立體浮雕字或者漸層彩色字，卻只能靠手寫一串又一串的 text-shadow，調半天效果還不理想，調試好的程式碼也散落各處。本工具把四種最常用的文字特效——描邊、霓虹、立體、漸層——封裝成四個一鍵切換的類型，並透過顏色取色器與字級滑桿讓您直觀調整參數。您輸入任意文字後，右側預覽區會立即把特效套用上去，下方同步產生可直接使用的 CSS 程式碼。描邊特效使用 -webkit-text-stroke 配合 paint-order，讓描邊居於文字下層而填色保持主色；霓虹特效由四層由近及遠的 text-shadow 疊加，形成光暈擴散；立體特效用六層同向偏移的陰影堆疊出印刷機壓印般的厚度；漸層特效則透過 background-clip: text 把線性漸層裁切掉進字形內部。所有參數變化都會即時反映在預覽與程式碼中，複製按鈕一鍵把樣式表片段放入剪貼簿。

✨ 功能特點

• 四種特效類型：描邊、霓虹、立體、漸層，一鍵切換
• 主色與特效色獨立取色：任意品牌色都能搭配
• 字級滑桿即時調整：24 到 140 像素連續可調
• 預覽底色可改：方便檢視深色特效在不同背景下的表現
• 同步產生 CSS：每次調整都輸出規範的樣式表片段
• 一鍵複製程式碼：複製按鈕直接把片段寫入剪貼簿

📝 使用方式

1. 在特效文字輸入框中填寫要美化的文字，例如標題或標語
2. 在特效類型中點擊描邊、霓虹、立體或漸層之一
3. 拖動字級滑桿，並用取色器選擇主色與特效色
4. 如需在深色背景檢視，可修改預覽底色
5. 滿意後點擊複製 CSS，把片段貼上至自己的樣式表中

⚠️ 注意事項

• 文字不能為空：未輸入文字時預覽區不會更新
• 描邊相容：-webkit-text-stroke 在主流瀏覽器中均受支援
• 漸層裁切：background-clip: text 需配合透明文字顏色使用
• 預覽底色：底色僅用於本機檢視，不會寫入產生的 CSS
• 純前端：所有樣式計算在瀏覽器內完成，不發起網路請求