CSS Gradient Generator
Create CSS gradients
Create CSS gradients 在您的瀏覽器中本地執行
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
CSS 漸層產生器從兩種顏色和一個角度建立真正的線性或徑向漸變，顯示其完整尺寸，並向您提供 CSS。角度是人們誤讀的部分：在CSS中，0deg指向上方，方向順時針旋轉，所以90deg從左到右，180deg從上到下。犯了這個錯誤就是為什麼漸變第一次看起來常常是顛倒的。兩種顏色都可以帶有八個 alpha 值，這就是在英雄影像上淡出漸變的方法。
Where people use the
- 建立一個在兩種品牌顏色之間漸變的英雄背景。
- 在程式碼中提交之前測試哪個角度看起來正確。
- 為卡片或按鈕產生微妙的垂直漸變。
- 建立使照片變暗的半透明疊加層。
How to use the
- 1
選擇開始和結束顏色
使用顏色選擇器或輸入十六進位值。預覽和 CSS 會隨著您的變更而更新。
- 2
選擇線性或徑向
線性以選定的角度穿過盒子。徑向從中心向外擴充套件為一個圓。
- 3
設定角度
將滑塊從 0 度拖曳到 360 度。記得向上 0 度，向右 90 度，向下 180 度，向左 270 度。
- 4
複製 CSS
該規則是一個背景宣告，您可以直接貼上到樣式表中，或者如果您願意，也可以貼上到背景影像屬性中。
提示和最佳實踐
- 對於帶有文字的背景，希望亮度差異較小；它讀起來像是一種質感，而不是一種幹擾。
- 對於漸變文本，請檢查最亮點和最暗點的對比度，而不僅僅是平均值。
- 將梯度保持在兩到三級；更多的看起來很泥濘。
常見問題
角度指向哪個方向？
0 度指向元素的頂部，角度順時針增加。所以 90 度向右，180 度往下。如果您習慣從右側逆時針測量角度的數學角度，這是違反直覺的。
為什麼我的漸層看起來呈現帶狀？
因為亮度接近的兩種顏色會在 8 位元顯示器上產生可見的階梯，尤其是在大面積上。新增微妙的第三個光圈，或使用稍寬的亮度範圍，通常會隱藏它。
我可以使用透明度嗎？
是的。使用八位元十六進位值，例如 667eea00 表示完全透明，或 667eea80 表示半透明，漸進式將在其後面的任何內容上淡出。
到處都支援漸層嗎？
目前每個瀏覽器都支援線性和徑向漸變，無需字首。只有非常舊版的 Safari 和 Android 才需要供應商字首，這實際上意味著 2015 年後不再建置任何內容。
為什麼我的漸層不顯示？
因為元素沒有高度。漸變被繪製到元素的框中，因此空的 div 會折疊到零高度並且不顯示任何內容。設定高度或新增內容。
它會產生兩個以上的色標嗎？
不，這個工具可以處理兩個。對於多停止漸變，採用它產生的 CSS 並手動新增停止；語法只是更多用逗號分隔的顏色和百分比對。