Shadergradient
幫助設計師和網站創作者在網頁、Figma 和 Framer 中製作動態漸層,並提供 React 元件。
- 每月造訪次數
- 23.3K
- 下降22.9%較上月2026 年 10 月
- 公開營收
- 未公開
- 暫無公開營收證據
- 入門價
- 免費
- 沒有月付訂閱價
- 首次發布
- 3 年前
- 2023-09-15 · 估算
訪問
行銷動作
發布、搜尋與內容、引薦、促銷X 帳號@ruucm
- gradient and colour tools that make your work pop, save this 👇 https://studio.zoxilsi.cc/ https://ramps.studio/ https://shadergradient.co/ https://colir.space/ What am I missing?
@yassinezaanouni · 2026-09-16 · 4 贊 · 0 轉發 · 320 瀏覽
開源倉庫與自部署
GitHub 開源與智慧體接入
流量來源
2026 年 10 月
訪問構成
管道
- 直接訪問49%
- 自然搜尋35%
- 外部引薦8%
- 社交媒體4%
- 其他3%
國家/地區
- 印度55%
- 美國14%
- 印尼9%
- 巴西6%
- 烏茲別克4%
搜尋
站點權重 —網域名稱註冊 2022-09-18
| 關鍵字 | 月搜尋量 |
|---|---|
| shader gradient | 3,480 |
| shadergradient | 2,610 |
| gradient shader | 370 |
| shadergradient.co | 330 |
| customize gradient | 110 |
流量資料:Vaneform
定價
尚未識別出定價頁,或該頁面沒有公開價格。
頁面與變化
開始記錄於 2023-09-15
關鍵頁面
每週快照首頁
shadergradient.co/ 快照 2026-11-12
設計
首屏畫面視覺分析與 :root CSS
首屏畫面以橙紅、粉紫與淺藍漸層光場鋪滿畫面,疊加細顆粒質感和白色襯線大標題,底部集中呈現工具入口。
首屏畫面預覽 · 點擊放大
首屏畫面講了什麼與轉化路徑
“ShaderGradient”
品牌標識置頂,主標題與說明居中排列,底部將平台圖示和網頁體驗按鈕組合成一組入口。
首屏畫面轉化路徑:居中標題加按鈕 + 3D 建模或立體材質對象 → 下載用戶端 / 安裝外掛
- 品類定位錨點
- 首屏畫面大幅產品介面
色板 · 點擊複製
五維設計評分8.2 / 10
- 字體與排版
- 8.0
- 色彩與對比
- 9.0
- 構圖與留白
- 8.0
- 細節與工藝
- 8.0
- 風格辨識度
- 8.0
結構
- 字體
- Inter
- 首屏畫面版式
- 居中標題加按鈕
- 主視覺
- 3D 建模或立體材質對象
- 轉化動作
- 下載用戶端 / 安裝外掛
- 信任背書
- 無顯式背書
- 導航
- 極簡雙端標識與按鈕
- 明暗與密度
- 深色 · 留白多
- 圓角與層級
- 大圓角 · 細線分層
預覽 AI 設計說明全文(含 :root CSS 變量與版式規則)只寫風格參數,禁止復刻該產品的品牌名、標誌、文案與圖片
# 設計說明:漸層光暈(兼備雜誌排版)
深色或淺色底上的彩色光暈與半透明玻璃面板,多見於 AI 產品。
## 設計參數
```css
:root {
--background: #ff3b1f;
--surface: #fffaf4;
--foreground: #fff8ed;
--muted-foreground: #f7d8d4;
--accent: #a9a0ff;
--radius: 16px;
--font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}
```
色彩面積配比:背景 #FF3B1F(約 48%) · 面板 #FFFAF4(約 8%) · 正文 #FFF8ED(約 8%) · 次要文字 #F7D8D4(約 6%) · 強調 #A9A0FF(約 30%)。背景與面板占絕大部分面積,強調色只用於主按鈕與當前激活狀態。
## 版式與轉化結構
- 首屏畫面版式:居中標題加按鈕
- 導航結構:極簡雙端標識與按鈕
- 明暗與密度:深色 · 留白多
- 圓角與層級:大圓角;不用陰影,用細線與留白區分層級
- 主視覺載體:3D 建模或立體材質對象
- 轉化動作:下載用戶端 / 安裝外掛
- 標題切入點:品類定位錨點
- 首屏畫面元件特徵:首屏畫面大幅產品介面
- 空間布局拆解:品牌標識置頂,主標題與說明居中排列,底部將平台圖示和網頁體驗按鈕組合成一組入口。
- 視覺特徵總結:首屏畫面以橙紅、粉紫與淺藍漸層光場鋪滿畫面,疊加細顆粒質感和白色襯線大標題,底部集中呈現工具入口。
## 避免
- 純平面色塊
- 襯線正文
- Cluttered dense tables in the hero
請按上面的設計參數與版式實現介面:顏色只用這些變量,強調色只給主要操作與當前狀態。只採用這種風格,禁止復刻任何參考產品的品牌名、標誌、文案與圖片。
問題與證據
- Shadergradient 的網站造訪次數是多少?
- Vaneform 估算 2026-10 網站造訪次數為 23.3K。造訪次數包含重複訪問,付費客戶數與收入需分別查看對應證據。來源
- Shadergradient 是什麼產品,支援哪些平台?
- Shadergradient 歸屬「平面與品牌設計」市場領域:幫助設計師和網站創作者在網頁、Figma 和 Framer 中製作動態漸層,並提供 React 元件。。 支援平台包括:僅網頁。
- Shadergradient 是開源專案嗎?採用什麼協議?
- Shadergradient 擁有公開程式碼倉庫(https://github.com/ruucm/shadergradient),已公開原始碼倉庫,記錄有 359 個 GitHub Stars。來源
同分類研究對象
設計 / 平面與品牌設計
這些產品屬於同一目錄分類。選型時請進一步核對客戶任務、功能與部署要求。
| 產品 | 入門價 | 每月造訪次數 | 營收佐證 |
|---|---|---|---|
| Canva巨獸供所有人線上設計和發布社交媒體內容、簡報、海報、影片和標誌的工具。 | $15/月 | 954.6M | 未公開 |
| miricanvas巨獸線上設計工具,幫助使用者利用範本、圖形和AI工具製作簡報、社交媒體貼文、海報等設計內容。 | $10.83/月 | 8.4M | 未公開 |
| Design成熟標桿面向企業和個人的 AI 設計平台,可用來生成和編輯標誌、網站、名片及社交媒體內容等設計。 | — | 4M | 未公開 |
| Coolors成熟標桿面向設計師、創作者及追求視覺協調人士的配色方案生成與探索工具。 | — | 3.8M | 未公開 |
| MakeaGif成熟標桿線上 GIF 製作工具,供使用者從圖片、影片、社交平台內容或攝像頭建立並分享動圖。 | — | 3.2M | 未公開 |
| PosterMyWall成熟標桿為小型企業提供設計範本、AI 創作、社交媒體排程、郵件行銷及活動推廣的一體化工具。 | $13/月 | 2.7M | 未公開 |