Skip to content
Zoyku

CSS グラデーション生成

2〜5 色をリニア・円形・円錐の CSS グラデーションに。ライブプレビュー、貼り付け可能なコード、ワンクリックの調和パレット付き。

カラーストップ

パレット

角度: 135°
ライブプレビュー
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° は上向き、90° は右向き。角度は時計回りに進みます。

このツールは完全にブラウザ内で動作します。データは端末から出ず、サーバーへアップロードされることはありません。

使い方

  1. 12〜5 色を設定するか、プリセットパレットから始めます。
  2. 2グラデーション種別を選び、角度や形状を調整。必要ならストップ位置を固定します。
  3. 3CSS ブロックをコピーしてスタイルシートに貼り付けます。

CSS グラデーション生成

2〜5 色を選び、リニア・円形・円錐から種別を選んで角度をドラッグ — プレビューは入力に合わせて即時更新され、CSS は常にワンコピーです。ストップの位置を空欄にすると CSS と同じ規則で自動配置され、正確なパーセントを指定すればハードストップやオフセンターの混合も自在です。

出力は実運用レベルのコードブロック:古いブラウザ向けの単色フォールバック行、旧 WebKit 向けの -webkit- 接頭辞行、最後に標準構文。ランダム調和ボタンはパレットの色相を HSL 空間で回転させるので、何度シャッフルしても配色が破綻しません。

よくある質問

CSS に -webkit- 接頭辞の行が含まれるのはなぜ?

旧 WebKit ブラウザ(おおよそ Safari 5〜6 の時代)が -webkit-linear-gradient しか理解しないための互換行です。ここ 10 年のブラウザは標準行を読むので、旧バージョンに対応しないなら削除して構いません。残しても 1 行、削除しても損はありません。

リニアグラデーションの角度は何を意味しますか?

グラデーションが進む方向で、真上を 0° として時計回りに測ります:0deg は下から上、90deg は左から右、180deg は上から下です。入力した角度は正規化され(−45 は 315 に)、-webkit- 行の旧構文の逆向き規約も自動処理されます。

リニアや円形ではなく円錐を使う場面は?

円錐グラデーションは中心点の周りを色が回ります。円グラフ、角度ダイヤル、日の出効果はこれで作ります。リニアは直線に沿って、円形は中心から外へ。同じストップでも幾何がまったく違うので、種別を切り替えてプレビューで確かめるのが確実です。

関連ツール

ユーティリティのすべてのツール →

コントラストチェッカー

2 色の WCAG コントラスト比を算出し、通常文字 / 拡大文字ごとの AA・AAA 合否をバッジで表示。プレビュー付きで、処理はすべてブラウザ内です。

すべてのツール →

カラーコンバーター

hex・rgb()・hsl() の色を貼り付ければ 3 形式まとめて変換。さらにティント&シェードの段階表まで自動生成します。

すべてのツール →

カラーピッカー

スウォッチで選ぶか、EyeDropper API で画面から直接スポイト。hex・RGB・HSL をワンクリックでコピーします。

すべてのツール →

画像に枠を追加

1 枚でもまとめてでも画像に単色または透明の枠を追加。リアルタイムプレビュー、出力は PNG / JPG、キャンバスは外側に広がり元画像は切り抜かれません。

すべてのツール →

ツールを埋め込む

1 行であなたのサイトにツールを。訪問者のブラウザ内で動きます。

<iframe src="https://zoyku.com/ja/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% ローカル処理