CSS漸層產生器

建立線性和放射狀CSS漸層。以視覺化方式選擇顏色，並複製產生的CSS。

顏色 1

顏色 2

角度: 135°

background: linear-gradient(135deg, #535beb, #7c3aed);

如何使用本工具

1
Click the Color 1 swatch and choose your starting color from the native color picker.
2
Click the Color 2 swatch and choose the color the gradient fades into.
3
Drag the Angle slider from 0 to 360 degrees to set the gradient direction; the live preview updates instantly.
4
Copy the generated background: linear-gradient(...) line from the code box into your stylesheet.

CSS漸層是兩種或多種顏色之間的顏色過渡。線性漸層沿一個方向流動；放射狀漸層則從一個點向外發散。本產生器涵蓋常見場景；對於帶有自訂位置的複雜多色標漸層，請手動建立。

Creating a hero section or landing page banner background that fades between two brand colors.
Generating button and card backgrounds with a subtle two-tone diagonal fade.
Producing a gradient overlay placed above a photo to improve text contrast.
Prototyping color direction quickly by dragging the angle slider before committing to final values.
Grabbing a ready-to-paste linear-gradient string for a Tailwind, styled-components, or plain CSS file.
Teaching or demonstrating how gradient angle changes the visual direction of a fade.

漸層的效能高嗎？▼

高：比漸層圖片要划算得多。它們可縮放到任意尺寸而不損失品質。

我可以為漸層加入動畫嗎？▼

不支援直接為漸層加入動畫；可透過JavaScript為漸層的相關屬性加入動畫，或使用background-position的技巧。