CSSグラデーションジェネレーター
現代のUI背景では、フラットな単色が使われることはほとんどありません。ヒーローセクション、ボタン、カードなど、ほぼすべてがCSSグラデーションを採用しています。このジェネレーターを使えば、線形または放射状を選び、カラーストップを好きなだけ追加し、角度（線形）または形状（放射状）を設定して、スタイルシートにそのまま貼り付けられるきれいなbackground: linear-gradient(…)値をコピーできます。
CSSグラデーションの作成方法
-
1
グラデーションの種類を選択
線形（角度による方向）または放射状（円／楕円）。
-
2
角度または形状を設定
線形：0～360°。放射状：円または楕円。
-
3
カラーストップを追加
各ストップは色と位置（0～100％）の組み合わせです。2ストップのグラデーションが基本で、3ストップ以上にするとより滑らかな遷移になります。
-
4
CSSをコピー
出力は単一の`background`プロパティ値で、任意のCSSファイルに貼り付けられます。
構文チートシート
/* 線形 */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);
/* 放射状（円） */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);
/* 複数ストップ */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);
直感に本当に合う角度
CSSのグラデーション角度は三角法とは異なります：0degは上向き（北）、90degは右向き（東）、180degは下向き、270degは左向きです。
| 方向 | 角度 |
|---|---|
| 上から下へ | 180度 |
| 下から上へ | 0度 |
| 左から右へ | 90度 |
| 左上から右下へ | 135度 |
濁った中間色を避ける
補色どうしの線形グラデーション（例：青→オレンジ）は、混色が「死んだ」ように見える50％付近のグレー帯を通過します。これを直すには次の方法があります：
- 関連する色相で中間ストップを追加する（青 → 紫 → 橙）。
- 知覚的により滑らかなブレンドを得るためにOKLCH補間（
linear-gradient(in oklch, ...)）を使う。2024年現在、すべての最新ブラウザでサポートされています。 - 一方の端点の色相をわずかにずらし、中間色がより暖かい色域に収まるようにする。
パフォーマンスのヒント
グラデーションはGPUで描画され、通常はコストが低めです。ただし、グラデーションをアニメーションさせる場合（background-positionのトリックやSVGのぼかしなど）は描画コストがかさむことがあります。公開前にミドルレンジのスマートフォンでテストしてください。
よくある質問
CSSのグラデーションは上から時計回りに角度を測るのに対し、標準的な数学では右から反時計回りに測ります。CSSの90degは右を指しますが、三角法では0°にあたります。
仕様上は任意の数が許可されています。実際には、4～5つを超えるストップは虹のように見えがちで、適切に選んだ2つか3つのストップのほうがほぼ常にすっきりとして見えます。
はい。任意の値として貼り付けてください：class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]"。再利用可能なグラデーションが必要な場合は、Tailwindの設定ファイルにカスタムユーティリティを定義してください。
通常のエディターでは、プレビューを描画するためにグラデーション設定がサーバーへ送信されます。ガイド付きのフローでは、種類、角度、形状、カラーストップもページURLに表示されます。機密情報は入力しないでください。このツールは再利用用のグラデーションプロジェクトを保存しません。
関連ツール
BinaryからHexへのコンバーター
バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。
バイナリからASCIIへの変換ツール
バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを取得できます。7ビットと8ビットのエンコードに対応。
FPS カウンター
requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。
Base64 → Hex 変換ツール
Base64文字列を、その背後にあるバイトの16進表現へ変換します。トークン、鍵、証明書、JWTの確認に便利です。
カラーパレットジェネレーター
基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。
2進数から10進数へ変換
2進数を瞬時に10進数へ変換します。各ビットがどのように寄与するかが分かる位取り展開を表示します。