跳至主要內容
Lizely

網格漸層生成器

依據第四層標準建立以基底顏色為基礎的放射漸層，調整各顏色與漸層擴充套件範圍，預覽結果，並複製精確的 CSS 本機版本。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇四個網格顏色與一個基底背景顏色。
  2. 2.調整漸層擴充套件範圍，同時觀察即時 CSS 預覽。
  3. 3.複製完整的背景宣告。
  4. 4.在實際元件中測試對比、繪製成本與跨瀏覽器渲染表現，再交付使用。

關於網格漸層生成器

網格漸層生成器會從四個疊加的 CSS 放射漸層影象與一個基底顏色，生成色彩豐富的網格風格背景。選擇每一個網格顏色，調整漸層擴充套件範圍從 10% 到 90%，檢視即時預覽，並複製完整的背景顏色與背景影象宣告。此結果使用標準 CSS 而非畫布、SVG、點陣圖輸出、渲染庫或上傳的資源。它能隨著元素縮放，且不會新增影象請求。

每一層皆為以四個角落附近固定位置為中心的圓形：15% 20%、85% 15%、20% 85%、以及 80% 80%。所選顏色從中心開始，漸漸轉為透明，直到指定百分比。CSS 會將逗號分隔的背景影象作為層疊呈現，其中第一個列出的漸層最接近觀看者。若所有層皆為透明，則以基底背景顏色填滿該區域，並提供一個可預測的備用方案，以應對漸層無法完全覆蓋整個區域的情況。

擴充套件控制決定每種顏色在達到透明前可見的範圍。較小的值會產生緊湊的島狀區域，中間有較多的基底顏色；較大的值則會讓層疊在更多區域融合，產生較柔和的混合區域。此控制刻意設有上下限且僅接受整數，以確保複製輸出仍具可讀性與可測試性。這並非物理模糊半徑、視覺插值設定、噪點場或真正的數學網格表面。瀏覽器的顏色插值與顯示設定可能影響實際的融合效果。

預覽使用輸出中所示的精確宣告。六位十六進位顏色碼在產生前會經過驗證，瀏覽器顏色輸入也會以該格式輸出。產生的漸層會使用明確的圓形、位置、零百分比顏色停止點以及透明終點語法。你可以將這些宣告貼入類別、自訂屬性流程、CSS 模組或樣式表中。僅在設計確實需要時，才額外加入尺寸、重複、附著、裁剪或動畫規則。

文字對比需要獨立測試。視覺上吸引人的漸層可能在區域性產生明暗區域，導致某種前景顏色在某些區域無法辨識。請在整個背景範圍內測試標題、正文、連結、焦點指示器與控制項，不僅僅在中心區域。考慮在長文字後方加入半透明的層或簡單的實心區塊。尊重強制顏色、高對比模式、減少動畫與列印樣式。本工具不計算 WCAG 對比，因為背景會隨著位置連續變化。

疊加漸層通常輕量，但大型動態背景或頻繁的樣式變更可能增加繪製成本與電力消耗。建議在一般頁面區塊使用靜態背景。若需動畫化位置或顏色，請在代表性行動裝置上測試，並尊重 prefers-reduced-motion。避免使用過大且離屏的元素與過多的過濾效果。CSS 漸層在不同瀏覽器、GPU、色彩空間、截圖與匯出 PDF 中可能出現微小差異，因此應檢視實際的目標環境。

所有計算與複製皆發生在當前標籤頁中。不會上傳或儲存任何調色盤、CSS、預覽或截圖，工具本身也無任何依賴。八個標準匯出的測試案例驗證了從 20% 到 90% 的透明終點；獨立測試鎖定了四個獨特位置、精確的 CSS 結構、六位十六進位驗證與擴充套件範圍邊界。對於生產級設計系統，應將最終顏色移至命名標記中，記錄預期的前景處理方式，並在實際交付的元件尺寸上加入視覺回歸測試覆蓋。

方法與來源

驗證五個六位十六進位顏色與一個從 10 到 90 的整數擴充套件值，建立四個位於固定獨特百分比位置的圓形放射漸層層，依照繪製順序疊加，並輸出與即時預覽相同的 CSS。

常見問題

這是一個畫布或圖片輸出工具嗎？
不是。它會產生多層 CSS 放射漸層與一個基底顏色，不會產生點陣圖檔案或畫布。
為何文字對比會在預覽中變化？
背景顏色會因半透明漸層的疊加而隨位置變化，因此某種前景顏色可能在某些區域無法達到對比要求。
每一個瀏覽器會渲染相同的顏色嗎？
語法是標準的，但插值、色彩管理、GPU 繪製、截圖與 PDF 可能導致微小的視覺差異。

相關工具

開發者工具 使用指南

查看全部