漸層產生器

CSS 線性/放射/錐形漸層，支援色標、預覽及可複製的程式碼

建立 CSS 漸層 (線性、放射、錐形)，可自訂色標與角度。調整色標時即時預覽更新；生成的 CSS 可直接複製至樣式表。

Linear

Radial

Conic

角度 (deg)

色標

位置 (%)

預設庫

預覽

CSS

background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

使用方法

Choose the gradient type: linear, radial, or conic.
Add color stops and drag them to set each color's position; for linear and conic, set the angle in degrees.
The preview pane updates live as you edit.
Copy the generated CSS background value straight into your stylesheet.

範例

Two stops at #ff7e5f (0%) and #feb47b (100%) on a 90deg linear gradient produce the CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%).
Switching to radial type with the same stops creates a soft glow from the center outward, shown live in the preview.