Presets
Toolz
Shadow layers
Offset X0px
Offset Y0px
Blur7px
Opacity100%
Generated CSS
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;Category:css
Mode:Offline
Version:1.0.0
Access:Free
什麼是 CSS 文字陰影產生器？
CSS 文字陰影產生器是 CSS 文字陰影屬性的視覺編輯器。 您使用滑桿調整水平偏移、垂直偏移、模糊半徑、顏色和不透明度，然後在範例文字上觀看效果渲染，然後複製確切的 CSS。 無需猜測像素值並刷新您的頁面，而是直接塑造陰影並閱讀它產生的程式碼。
文字陰影屬性比框陰影更簡單 - 它沒有擴展半徑,也沒有插入關鍵字 - 但分層才是它變得強大的地方。單一聲明可以堆疊多個陰影,每個陰影都有自己的偏移、模糊和顏色。堆疊層是建立霓虹燈、硬輪廓、復古 3D 刻字、凸版壓花效果和長平面陰影的方式。手動編寫這些內容非常繁瑣,因此此工具可以管理這些圖層並以正確的油漆順序輸出規格有效、逗號分隔的聲明。
一切都發生在您的瀏覽器中。 選擇像 Neon Glow 或 Outline 這樣的預設，調整每一層，在明暗背景之間切換預覽，編輯範例文字，然後複製 CSS。 沒有帳戶，沒有上傳，一旦頁面載入，它就會繼續離線工作。
層序從前到後從前到後運行,因此首先列出的陰影位於頂部。這就是輪廓發揮作用的原因:四個小陰影在每個方向上偏移一個像素,堆疊起來,近似於 CSS 沒有直接屬性的筆畫。模糊半徑是渲染成本昂貴的部分,並且在捲軸上重新繪製幾個大模糊的文字是低功率設備出現卡紙的常見原因。陰影永遠不會影響佈局,因此它們可能會溢出其框並被隱藏溢出的父級剪裁。
如何使用 CSS 文字陰影產生器？
1
從預設或空白層開始
選擇一個預設，如 Soft、Neon Glow、Retro 3D 或 Outline 以獲得逼真的起點，或從單一預設陰影層開始，然後從那裡建立。
2
用滑塊調整陰影
拖曳水平和垂直偏移和模糊半徑滑桿，然後設定陰影顏色和不透明度。 編輯時立即觀看範例文字更新。
3
堆疊更多層以進行效果
添加額外的圖層以創建發光、輪廓或 3D 深度 - 陰影的幾個偏移副本讀作擠壓文本,而堆疊的模糊副本讀作發光。
4
複製 CSS
複製文字陰影聲明並將其直接貼到您的樣式表或元件樣式中。 將其應用於任何文字元素以獲得相同的效果。
主要特點
多層陰影
將任意數量的陰影圖層堆疊到一個聲明中，按照正確的從上到下的油漆順序，這就是霓虹發光、輪廓和 3D 文字的構建方式
全面的財產控制
用於水平和垂直偏移和模糊半徑的滑桿，加上顏色選擇器和不透明度控制，涵蓋了文字陰影語法的每個部分
現場預覽
範例文字在編輯時會立即更新，您可以在明暗之間切換其背景，以檢查效果如何在兩個主題中讀取
現成的預設
柔軟、硬、霓虹發光、復古 3D、輪廓、浮雕、火和長陰影效果的精選食譜，為您提供經過驗證的起點，而不是空白畫布
Frequently Asked Questions
Text-Shadow 為元素的文字添加一個或多個陰影。 每個陰影都採用水平偏移、垂直偏移、可選的模糊半徑和顏色。 多個陰影以逗號分隔，並在頂部塗上第一個陰影。
Related Tools
CFG
css
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CUC
css
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CNG
css
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
MS
marketing
Maps Scraper
Pull business listings for any search and place: name, address, category, rating, review count, phone and website, deduplicated and exportable as CSV.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
text shadow generatorcss text shadowtext-shadow cssneon text cssglow text effecttext outline cssletterpress css3d text csscss text effects