カラー・デザイン

CSSグラデーション生成

CSSグラデーション生成ツールは、色や方向、ぼかし（カラーストップ）をGUIで操作するだけでCSSグラデーションのコードを自動生成する無料ツールです。線形（linear）・放射（radial）・円錐（conic）の3種類に対応し、リアルタイムのプレビューを見ながら、Webサイトの背景・ボタン・見出しなどに使えるグラデーションをすぐに作成できます。

カラーストップ（色変化の起点）

バーをクリックで色を追加

色

HEX

不透明度100%

位置0%

グラデーションの種類

角度90°

プレビュー

CSS コード

.gradient {
  background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
}

グラデーションの生成はすべてお使いのブラウザ内で行われ、入力した内容が外部サーバーに送信されることはありません。

カラーピッカー

画像から色をスポイトで抽出し、カラーコードを取得できるツール。ルーペで拡大しながらピクセル単位で色を調べられ、HEX / RGB / HSL 切替やパレットのエクスポートに対応。無料・登録不要で、ブラウザだけで完結します。

カラーコード変換

HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。

コントラストチェッカー

前景色（文字色）と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準への合否判定に加え、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。

配色パレット生成

ベースカラーを1色選ぶだけで、補色・類似色・トライアドなど配色理論に基づくカラーパレットを自動生成する無料の配色ジェネレーター。CSS変数・Tailwind・SCSS・JSON形式でエクスポートでき、コントラストの目安も確認できます。ブラウザだけで完結します。

CSSグラデーション生成ツールとは？

種類を選んだら、線形・円錐では角度をスライダーで調整し、放射では形状（円・楕円）と中心位置を指定できます。色はカラーストップとして自由に追加・削除でき、バー上のハンドルをドラッグして位置を変えたり、カラーピッカーや HEX 入力で色を選んだりできます。各ストップには不透明度（アルファ）も設定でき、rgba() を使った透過グラデーションも作成可能です。「ランダム生成」ボタンを押せば、配色のアイデアもすぐに試せます。

作成したグラデーションは、CSS（background-image）・CSS変数（:root { --gradient }）・Tailwind の backgroundImage・SCSS 変数の各形式でワンクリックでコピーでき、そのまま実装に貼り付けられます。さらに「URL をコピー」を押すと、現在のグラデーションを再現できる共有 URL が得られるので、チーム共有やブックマークにも便利です。

グラデーションの生成はすべてお使いのブラウザ内で行われ、入力した内容が外部サーバーに送信されることはありません。アカウント登録や広告クリックなしで、すぐに使えます。

使い方

カラーストップのバーをクリックして色を追加し、ハンドルをドラッグして位置を変えます。色はカラーピッカーまたは HEX で、不透明度（アルファ）はスライダーで調整します。「ランダム生成」で配色のアイデアもすぐに試せます。
グラデーションの種類（線形・放射・円錐）を選びます。線形・円錐では角度をスライダーで、放射では形状（円・楕円）と中心位置を調整します。
プレビューでグラデーションの仕上がりをリアルタイムに確認します。「URL をコピー」を押すと、現在の設定を再現できる共有 URL が得られます。
「CSS コード」で CSS・CSS変数・Tailwind・SCSS のタブを切り替え、「CSSコードをコピー」でコードを取得して実装に貼り付けます。

利用シーン

Web サイトやボタンの背景にグラデーションを使いたいデザイナー・コーダーが、CSS をコピペですぐに用意する。
線形・放射・円錐など複数のグラデーションを試しながら、デザインの方向性を決めたいフロントエンドエンジニア。
CSS変数や Tailwind の設定として、グラデーションをそのままコードに落とし込みたい開発者。
不透明度を含むグラデーションで、画像の上にかけるオーバーレイやガラス風の表現を作りたい方。
決めたグラデーションを共有 URL でチームに渡したり、後から同じ設定を再現したりしたい方。

注意点

グラデーションの生成はすべてブラウザ内で行われ、入力した内容が外部に送信されることはありません。
円錐グラデーション（`conic-gradient`）は一部の古いブラウザでは表示されない場合があります。利用環境の対応状況をご確認ください。
カラーストップは最大 8 個まで追加できます。不透明度が 100% のときは `#RRGGBB`、100% 未満のときは `rgba()` で出力されます。
共有 URL には種類・角度・形状・中心位置・各カラーストップ（色・不透明度・位置）が含まれます。URL を開くと同じ設定でグラデーションが再現されます。

よくある質問

入力した内容はサーバーに送信されますか？

送信されません。グラデーションの生成はすべてお使いのブラウザ内で完結します。ブランドカラーや業務で扱う色でも安心してご利用いただけます。

線形・放射・円錐グラデーションの違いは何ですか？

線形（linear-gradient）は直線方向に色が変化するもっとも一般的なグラデーションで、角度で向きを指定します。放射（radial-gradient）は中心から外側に向かって円・楕円状に広がります。円錐（conic-gradient）は中心を軸に角度方向へ色が回転し、円グラフのような表現に向きます。本ツールでは3種類を切り替えながら作成できます。

CSS変数や Tailwind 用に書き出せますか？

できます。「CSS コード」のタブで CSS（background-image）・CSS変数（:root の --gradient）・Tailwind の backgroundImage・SCSS 変数を切り替えられ、「CSSコードをコピー」ボタンでコード全体をコピーしてそのまま実装に貼り付けられます。

透明度（半透明）のあるグラデーションは作れますか？

作れます。各カラーストップに不透明度（アルファ）を設定でき、100% 未満のストップは rgba() 形式で出力されます。画像に重ねるオーバーレイなど、透過を活かしたグラデーションも作成できます。

作ったグラデーションを共有・保存できますか？

「URL をコピー」を押すと、種類・角度・カラーストップなどを含む共有 URL が得られます。その URL を開くと同じグラデーションが再現されるため、チームへの共有やブックマークに便利です。

色は何色まで使えますか？

カラーストップは最大 8 個まで追加でき、3色以上の複雑なグラデーションも作成できます。バーをクリックすると、その位置の色を補間した新しいストップが追加されます。