WebGradients 配好的 180個漸層色彩，隨你取用

漸層色較單一顏色來的有層次感，也深受美工人員的愛用，要用 CSS 做出漸層色，不難，但難在顏色如何搭配，這讓人很傷腦筋的，WebGradients 這個網站提供 180個已經配好色的漸層色彩，並提供 CSS3 語法與 PNG 圖檔，不論是個人或商業均可免費取用。

• WebGradients
• 網站網址：https://webgradients.com/

§相關文章，還可以參閱：

• 

  SQL Translator SQL指令轉譯網站，讓您輕鬆進入 SQL 的世界
• 

  CSS Tooltip Generator 提示訊息框 CSS 語法產生器
• 

  Theme Toggles：輕鬆實現網頁 Dark Mode 切換功能，程式碼直接複製使用
• 

  UI Buttons 輕鬆在網頁加入互動式按鈕風格
• 

  emnu 步驟可視化的線上 C++ 編譯器

如何使用 WebGradients 取得漸層色的 CSS 語法或 PNG 圖檔？

1.使用瀏覽器進入 WebGradients 網站，便可看到以配置好的漸層色集合。

2.每個漸層色卡中右上角的圓形向下箭頭圖式按鈕，可以用來取得 PNG 圖檔。

3.要取得漸層色彩的 CSS3 語法，則可以按漸層色卡中右下角的[ Copy CSS ]，便會將 CSS3 語法複製到剪貼簿中，並在該色卡中出現 🐯 Gotcha! 圖形與字樣。

4.取得的語法。 background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);