ShaderGradient は、カスタマイズできる動く 3D グラデーションを作ります。React パッケージ、Vue・Nuxt パッケージ、Figma プラグイン、Framer コンポーネントとして使えます。
これはエージェントのスキルではなくコードライブラリです。それを使うコードは AI エージェントが書きます。
README には MIT ライセンスと書かれていますが、リポジトリに独立したライセンスファイルはありません。2026年10月28日時点で、GitHub のスターは約3,000個でした。
何をするか
- グラデーションを平面、球、水面といった 3D 形状として描画するので、動いて光をとらえます。
- 3 色を選び、速度、強さ、密度、粒子感、ライティング、カメラの角度を設定します。
- ShaderGradient のサイトでグラデーションをデザインし、その設定をリンクとしてコピーできます。コンポーネントはそのリンクから直接グラデーションを読み込めます。
- グラデーションがスクロールで表示されたときだけ読み込むこともできます。
先に知っておきたいこと
React 版は React Three Fiber と Three.js の上に作られているので、ページに 3D エンジンが加わります。普通の CSS グラデーションよりページが重くなるため、特にスマートフォンでの読み込み速度を確認しましょう。バージョンも重要で、Next.js 15 の App Router では React Three Fiber 9 と React 19 を使う必要があると README に書かれています。
インストール方法
React の場合は、パッケージとそのピア依存関係をインストールします。
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/threeあとは shadergradient.co でグラデーションをデザインし、リンクをコピーして、ヒーローセクションの背後に置くようエージェントに頼みます。Figma や Framer のユーザーは、代わりにプラグインやコンポーネントをコードなしで使えます。