首頁
Design Token & Architecture Showcase

CHROMATIC GLOW

跨主題適配的文字視覺特效，在深色與淺色背景下皆具備極致衝擊力與文字辨識度。

互動預覽實驗室

CHROMATIC GLOW

深淺色模式設計策略對比

淺色模式 (Light Mode)
color: #0f172a
CHROMATIC GLOW

採用深暗色文字 (#0f172a) 作為對比基礎，搭配飽和度提升的高動態青藍 (頂部) 與暖橘 (底部) 色差邊緣，以及外圍柔和環境擴散，告別亮底白光泛白失真。

深色模式 (Dark Mode)
color: #ffffff
CHROMATIC GLOW

保留原始極致視覺邏輯：極致純白核心字體、頂部青藍霓虹色差、底部橘紅烈焰色散，以及層層擴散的白色環境光暈。

色差邊緣與高光層次解析

此效果由五層精密定位的 text-shadow 疊加運算而成，同時達成垂直色差分離（Chromatic Shift）與多光譜漫射（Diffuse Bloom）。

層級名稱CSS 陰影參數 (Dark Mode)CSS 陰影參數 (Light Mode)效果
頂部色差邊緣 (Top Cyan Aberration)0 -4px 4px rgba(0, 220, 255, 0.9)0 -3px 4px rgba(0, 160, 245, 0.9)頂部青藍色散
底部色差邊緣 (Bottom Orange Aberration)0 4px 4px rgba(255, 120, 0, 0.9)0 3px 4px rgba(249, 115, 22, 0.92)底部暖橘色散
核心輪廓錨點 (Core Contrast / Highlight)0 0 20px rgba(255, 255, 255, 0.9)0 0 14px rgba(15, 23, 42, 0.16)核心輪廓錨定
中層擴散光線 (Mid Bloom)0 0 45px rgba(255, 255, 255, 0.6)0 0 35px rgba(79, 70, 229, 0.2)中層光暈光譜
外層環境輝光 (Ambient Atmosphere)0 0 90px rgba(255, 255, 255, 0.3)0 0 75px rgba(14, 165, 233, 0.15)外圍環境輝光

底層架構整合指南

本特效已抽象化為全域 CSS Variables 與工具類別 .text-glow-aberration，在 Astro 或 Tailwind 專案中皆可直接使用。

Astro Component Usage
<!-- 在任何 .astro 頁面或元件中直接套用 -->
<h1 class="text-glow-aberration">
  CHROMATIC GLOW
</h1>

<!-- 強度修飾類別 (可選) -->
<p class="text-glow-aberration-subtle">Subtle Glow</p>
<h2 class="text-glow-aberration-intense">Intense Glow</h2>