Skip to main content
Penguin Tools企鵝工具

CSS 漸層文字產生器

產生可在文字上套用漸層的 CSS 程式碼。 即時預覽顏色、方向和範圍的調整效果。

Gradient Text
0%
100%
.gradient-text {
  background: linear-gradient(to right, #ec4899 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 700;
}
分享此工具
📖

使用方法

Step 1

輸入文字

輸入文字

輸入要套用漸層的文字

Step 2

設定漸層

設定漸層

調整漸層顏色、方向、類型等

Step 3

複製 CSS

複製 CSS

複製產生的 CSS 程式碼

✨

功能特色

即時預覽

即時預覽漸層文字效果

多種漸層

支援線性、放射狀、錐形漸層及多個色標

內建預設

一鍵套用熱門漸層預設

❓

FAQ

一種使用 background-clip: text 將漸層背景套用到文字上的 CSS 技術。

🔗相關工具

🎨
設計工具

色碼換算工具

在 HEX、RGB 和 HSL 色碼之間互換。 使用顏色選擇器和即時預覽直觀選色。

🎨
設計工具

色彩選擇器

使用色輪和滑桿直覺地選取顏色。 取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。

🎨
設計工具

圖片色彩擷取器

自動偵測圖片中的主要色彩並生成色彩調色盤。 也可以點擊圖片上的任意位置來取得個別色彩。

🎯
設計工具

圖片平均色彩擷取器

計算整張圖片或選定區域的平均色彩。 適合用於選擇配色方案或縮圖背景顏色。

🌈
設計工具

CSS 漸層產生器

使用拖動控制視覺化建立 CSS 漸層。 支援線性、放射狀和圓錐漸層類型及預設。

🔲
設計工具

CSS 陰影產生器

使用滑桿視覺化建立 CSS box-shadow。 支援多重陰影和內陰影。