CSSグラデーションジェネレーター
線形（linear）・円形（radial）のCSSグラデーションをプレビューしながら無料で作成できます。
カラーストップ
よくある質問
linear-gradientとradial-gradientの違いは何ですか？ +
linear-gradient（線形）は指定した角度に沿って直線的に色が変化するグラデーションです。radial-gradient（円形）は中心点から外側に向かって円状・楕円状に色が変化します。ボタンや背景の演出方法によって使い分けます。
カラーストップの位置（%）とは何ですか？ +
グラデーション全体を0%〜100%としたとき、その色が配置される位置です。例えば「0%に赤、50%に黄、100%に青」と設定すると、赤→黄→青の順に色が変化します。位置を偏らせることで色の変化する速さを調整できます。
生成したCSSはそのまま使えますか？ +
はい。「background」または「background-image」プロパティの値としてコピーし、CSSファイルやstyle属性にそのまま貼り付けて利用できます。主要なモダンブラウザはすべて対応しています。
カラーストップは何個まで追加できますか？ +
特に上限はありませんが、見やすさの観点から2〜6色程度をおすすめします。不要なストップは「削除」ボタンでいつでも取り除けます。
入力した色の情報はサーバーに送信されますか？ +
いいえ。プレビューやCSSコードの生成はすべてブラウザ内（JavaScript）で完結し、外部に送信されることはありません。
特徴
線形・円形の両方に対応
linear-gradientとradial-gradient、両方のグラデーションをその場で切り替えて作成できます。
カラーストップを自由に追加
3色以上の複雑なグラデーションも、色と位置を個別に調整して作成できます。
リアルタイムプレビュー
設定を変更すると同時にプレビューが更新され、仕上がりをすぐに確認できます。
プリセット・ランダム生成
よく使われる配色プリセットや、ランダム生成でアイデア出しにも活用できます。
使い方
色を選ぶ
カラーストップの色と位置を設定し、必要なら追加します。
タイプ・角度を調整
線形・円形を選び、角度や形状をプレビューを見ながら調整します。
CSSをコピー
生成されたコードをコピーし、CSSファイルに貼り付けて使用します。
ユースケース
ボタン・バナーの背景演出
立体感や目を引く印象を与えたいボタン・見出し背景の作成に。
ヒーローセクションの背景
LPやサイトのファーストビューに映えるグラデーション背景を素早く試作。
ダークモード配色の検討
暗めの色同士を組み合わせて、ダークテーマに合うグラデーションを検討したいときに。
デザインカンプの配色確認
Figma等で決めた色をもとに、実装用のCSS値を素早く書き出したいときに。
安全性とプライバシー
処理はすべてブラウザ内で完結
設定した色や角度はサーバーに送信されず、その場でプレビュー・生成されます。
入力履歴は残りません
ページを閉じたり再読み込みすると、設定内容は残らず消えます。
アカウント登録不要
会員登録やログインなしで、誰でもすぐに利用できます。
通信はHTTPSで保護
ページ自体の読み込みもHTTPSで暗号化され、安全に利用できます。
同じカテゴリのツール
他のツールもチェックQRコード作成
URL・テキスト・メール・WiFi・連絡先(vCard)からQRコードを無料生成。PNG・SVGでダウンロード可能。
QRコード読み取り（デコーダー）
画像アップロード・ドラッグ＆ドロップ・カメラでQRコードを無料で読み取り、URL・テキストを解析。ブラウザ内処理でサーバー送信なし。
ダミーテキスト生成ツール
Lorem Ipsum（英語）または日本語のダミーテキストを、段落数・文数を指定して無料生成。コピー・HTML出力・ダウンロードに対応。ブラウザ内処理でサーバー送信なし。
Faviconジェネレーター
画像から favicon.ico・各サイズのPNG・Apple Touch Icon・Android用アイコンを無料で一括生成。HTMLタグ付きでZIPダウンロード。ブラウザ内処理でサーバー送信なし。
抽選・順番決め・チーム分けツール
名前やアイテムを1行ずつ入力するだけで、当選者の抽選・順番決め・チーム分けを無料でランダム実行。重複あり/なしの抽選、均等なチーム分けに対応。
CSS box-shadowジェネレーター
水平位置・垂直位置・ぼかし・広がり・色・不透明度・inset(内側)を調整しながらbox-shadowのCSSをプレビュー生成。複数シャドウの重ね合わせ、プリセット、コードのコピーに対応。