Tailwind 陰影產生器

疊加經檢查的內外陰影，匯出 arbitrary classes 與 v4 theme tokens。

tailwind-shadow-generator本機處理

正在啟用本機工具…

Tailwind v4 工作台

預覽使用原生 CSS，不載入 Tailwind runtime。修改即在本機更新結果；文字與設定僅留於頁面記憶體。

陰影 token 名稱

各層：x y blur spread hex opacity [inset]

每行一層，最多 8 層；位置 ±100、blur 0–200、透明度 0–1。

預覽背景

上限：每文字區 16,000 UTF-8 bytes、1,000 classes、24 個版面項目、8 張卡片／陰影層、20 × 12 表格儲存格。不執行輸入 HTML、程式、URL 或命令。

轉換器採常見且明示的規則。保留 arbitrary 值與 modifier 字元；未知 tokens 標示未支援。實際 cascade、自訂主題及外掛須用 Tailwind 建置核對。

參考資料核對: 2026-10-21 · 主題 · 響應式設計 · v4 遷移指南 · 色彩

結果已在本機更新。套用至專案前請核對。

陰影預覽

Classes

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

shadow-card
shadow-[0px_8px_24px_-4px_rgb(15_23_42_/_0.18),_0px_2px_6px_0px_rgb(15_23_42_/_0.1)]

展開可選取的完整文字

shadow-card
shadow-[0px_8px_24px_-4px_rgb(15_23_42_/_0.18),_0px_2px_6px_0px_rgb(15_23_42_/_0.1)]

HTML

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

<div>陰影預覽</div>

展開可選取的完整文字

<div>陰影預覽</div>

CSS

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

.card { box-shadow: 0px 8px 24px -4px rgb(15 23 42 / 0.18), 0px 2px 6px 0px rgb(15 23 42 / 0.1); }

展開可選取的完整文字

.card { box-shadow: 0px 8px 24px -4px rgb(15 23 42 / 0.18), 0px 2px 6px 0px rgb(15 23 42 / 0.1); }

@theme

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

@import "tailwindcss";

@theme {
  --shadow-card: 0px 8px 24px -4px rgb(15 23 42 / 0.18), 0px 2px 6px 0px rgb(15 23 42 / 0.1);
}

展開可選取的完整文字

@import "tailwindcss";

@theme {
  --shadow-card: 0px 8px 24px -4px rgb(15 23 42 / 0.18), 0px 2px 6px 0px rgb(15 23 42 / 0.1);
}

調整有標籤的控制項，即時更新原生 CSS 預覽，並複製或下載 Tailwind v4 輸出。範例與重設僅存於頁面記憶體。

不載入 Tailwind runtime，也不是完整編譯器。轉換器支援明示常見子集，未知 utility 會列出。衝突與暗色建議須在實際建置專案核對。輸入上限 16,000 UTF-8 bytes、1,000 classes；不執行程式或輸入 HTML。