%
%
CSS ClassCSS
.gradient {
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}Inline StyleCSS
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);Category:css
Mode:Offline
Version:1.0.0
Access:Free
什麼是 CSS 漸層產生器？
CSS Gridient Generator 是一個免費的線上工具，可讓您透過視覺介面和即時預覽創建漂亮的 CSS 漸層。 它支援線性、徑向和錐形漸層類型，讓您可以為網站背景、按鈕、卡片和其他 UI 元素設計令人驚嘆的顏色轉換。
該工具提供了一個直覺的拖放介面，用於添加和定位色彩停止、調整漸層方向和角度以及微調不透明度。 您可以準確地即時看到漸層的外觀，從而輕鬆嘗試不同的顏色組合，直到您獲得完美的結果。
一旦您對漸層感到滿意，只需複製產生的 CSS 程式碼並將其貼上到您的樣式表中。 該工具輸出適用於所有現代瀏覽器的乾淨、相容的 CSS。 不需要設計或編碼專業知識來創造專業的漸層。
關於瀏覽器如何繪製漸變的一件事需要了解:顏色是在 sRGB 中插值的,這在感知上並不均勻。混合兩種截然相反的顏色(藍色到黃色是經典情況),將中點穿過去飽和的灰色,而這兩種顏色都沒有最終顏色所暗示的。通常的修復方法是在中間添加一個停止點來引導路徑,或者選擇在輪子上更靠近的結束顏色。在同一位置重複停止會產生硬邊而不是混合,這就是條紋和帶效果的建構方式。任何仍在接收更新的瀏覽器中的標準漸變不再需要供應商前綴,因此最短的輸出也是最相容的。漸變被繪製為背景,因此它們需要一個尺寸可見的盒子。
如何使用 CSS 漸層產生器？
1
選擇漸層類型
在線性、徑向或圓錐漸層類型之間進行選擇。 每種類型都會產生不同類型的顏色轉換效果。
2
添加色彩停止
點擊以新增色彩停止並為每個停止選擇顏色。 拖曳它們以沿著漸層調整它們的位置。
3
調整方向和角度
設定線性梯度的梯度方向或角度，或徑向梯度的中心位置，以控制顏色如何流動。
4
複製 CSS 代碼
一鍵複製產生的 CSS 程式碼，然後將其直接貼到您的樣式表中。 該程式碼已準備好在任何 Web 專案中使用。
主要特點
類別和內聯輸出
漸層既作為 CSS 規則發出,又作為內聯樣式的裸背景聲明發出,每個樣式都有自己的複製按鈕
多種梯度類型
創建具有完全控制方向、角度和形狀的線性、徑向和圓錐漸層
即時視覺預覽
調整顏色、停止和方向時即時查看漸層更新
一鍵 CSS 副本
複製乾淨的跨瀏覽器 CSS 程式碼，準備貼上到您的樣式表中
Frequently Asked Questions
將背景屬性設定為漸層函數： 背景：線性漸層（90 度，#FF0000，#0000ff）。 第一個值是方向（90 度等角度，或「右轉」等關鍵字），以及它之後的一切是顏色停止的清單。 在此處直觀地建立漸層，並將完成的聲明直接複製到您的樣式表中。
Related Tools
CBR
css
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CCG
css
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CFG
css
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CUC
css
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Comments
0 comments
No comments yet. Be the first to share your thoughts!
cssgradientlinearradialconiccolorbackgroundgenerator