首頁·顏色工具·CSS 漸層產生器

CSS 漸層產生器

定好顏色和角度,它就把 CSS 的 linear-gradient 寫給你。拖動色標能控制過渡發生在哪兒,結果直接貼進去就行。

🎨 全部在你的瀏覽器裡執行。不用裝,也不用註冊。
角度135°

預設

background: linear-gradient(135deg, #8b5cf6, #0ea5e9);

要在漸層上放文字,最亮的那一端和最暗的那一端都得量一遍對比度。只按一邊調,字到了另一邊就消失了。

這個工具能做什麼

  • 兩到三個顏色,帶色標位置
  • 可選角度或放射狀
  • 當場複製 CSS
  • 附 Tailwind 類名的用法

其他顏色工具

顏色會因螢幕和色彩描述檔而略有差別。