漸層產生器

用你喜歡的顏色建立線性或放射狀漸層、調整角度,再複製可直接貼上的 CSS,也能下載成圖片。

漸層顏色
類型
角度 135°
點一下即可複製

什麼是漸層?

漸層是兩個以上的顏色之間平順轉換的效果。只要幾行程式碼就能增加深度與現代感,因此在網頁設計中常用於背景、按鈕和頁首。

線性漸層與放射狀漸層的差別

線性漸層沿著一條直線變換顏色,方向由角度控制(0° 朝上,90° 朝右)。放射狀漸層則從中心點向外呈圓形擴散。這個產生器兩種都能建立,並提供對應的 CSS(linear-gradient 或 radial-gradient)。

在 CSS 中使用

複製程式碼,貼到元素的 background 屬性即可。你可以加入多個顏色,點一下就能分別編輯。如果還需要搭配的配色,可以試試配色產生器;要在漸層上放文字之前,記得先檢查對比。