CSSグラデーション生成
プレビュー付きで美しいCSSグラデーションを作成します
グラデーション設定
カラーストップ
カラーストップ 1
カラーストップ 2
グラデーションのプリセット
グラデーションのヒント
一定方向に色を滑らかに変化させるには、線形グラデーションを使用してください。
放射状グラデーションは、スポットライトや焦点を当てる効果に適しています。
円錐状グラデーションは、色相環や角度を使った模様に最適です。
カラーストップの位置を調整すると、グラデーションの色の分布を制御できます。
控えめなグラデーションには似た色相の色を、強い印象の効果には対照的な色を使用してください。
ライブプレビュー
CSSの短縮記法
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSSプロパティ
background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSSクラス
.gradient-bg {
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}色と位置を調整してください。操作に合わせてプレビューが更新されます。
CSSグラデーション生成について
この無料のCSSグラデーション生成ツールを使えば、あらゆるWebプロジェクト向けに、美しくなめらかな色の移り変わりを簡単に作れます。線形グラデーション、放射状グラデーション、円錐グラデーションを、色、位置、方向、角度まで自由に調整でき、リアルタイムのプレビューで確認できます。
控えめな2色の背景から複雑な多段グラデーションまで、位置を細かく指定できるカラーストップを最大10個使えます。「サンセット」「オーシャン」「フォレスト」「パープルレイン」などのプリセットから選ぶことも、ランダム生成で独自のグラデーションの配色を見つけることもできます。
ジェネレーターはすぐに整ったCSSグラデーションコードを出力し、ワンクリックでコピーしたり、PNG画像としてダウンロードしたりできます。出力形式はbackgroundショートハンド、background-imageプロパティ、そのまま使えるCSSクラスなど複数あります。すべての処理はブラウザ内で行われ、サーバーへのアップロードは不要です。
主な機能
- 線形、放射状、円錐の各グラデーションに対応し、細かくカスタマイズ可能
- 位置を個別に指定できるカラーストップを最大10個まで使え、精密なグラデーションを設計可能
- 線形グラデーション用の8方向プリセットと、任意の角度の入力
- 放射状グラデーションの形状(円/楕円)と位置の設定
- カラーホイール風の効果を作れる、開始角度を調整可能な円錐グラデーション
- 組み込みのプリセットグラデーション4種: サンセット、オーシャン、フォレスト、パープルレイン
- 発想や探索に役立つランダムグラデーション生成
- 設定を変更するとすぐに反映されるリアルタイムプレビュー
- 複数のCSS出力形式(ショートハンド、プロパティ、クラス)に対応したワンクリックコピー
- グラデーションを高解像度のPNG画像(800x600)としてダウンロード
CSSグラデーション生成の使い方
- グラデーションの種類を選択: 種類セレクターから線形、放射状、円錐のいずれかを選び、グラデーションのスタイルを決めます。
- 方向または位置を設定: 線形グラデーションでは方向か任意の角度を選びます。放射状では形状と位置を、円錐では開始角度を調整します。
- 色を追加して調整: カラーピッカーでグラデーションの色を設定し、位置の値をドラッグして各色が現れる場所を調整します。
- リアルタイムでプレビュー: 色、位置、設定を変更すると、グラデーションのプレビューがすぐに更新されます。
- CSSコードをコピー: 「コピー」ボタンをクリックすると、CSSグラデーションの記述が希望の形式でクリップボードにコピーされます。
- 画像としてダウンロード: 「ダウンロード」をクリックすると、デザインツールやプレゼンテーションで使えるPNG画像としてグラデーションを保存できます。
活用例
- Webサイトの背景: なめらかな色の移り変わりで、目を引くヒーローセクション、ヘッダー、ページ全体の背景を作成します。
- ボタンのスタイル: 目立ち、ユーザーを行動喚起(CTA)へ導くグラデーションボタンをデザインします。
- カードやコンポーネントのアクセント: UIのカードやコンポーネントに、グラデーションの枠線、オーバーレイ、アクセントカラーを加えます。
- テキスト効果: CSSグラデーションとbackground-clipを組み合わせて、カラフルなグラデーション文字を作ります。
- ローディング表示: スケルトンスクリーンやローディング状態向けに、アニメーションするグラデーション背景を作ります。
- SNS用のグラフィック: SNSの投稿、ストーリーズ、カバー写真に使えるグラデーション画像をダウンロードします。
- デザインシステムの配色: ブランドのデザイン言語に合わせて、統一されたグラデーショントークンを定めます。
- プレゼンテーションスライド: Webベースのプレゼンテーションやポートフォリオ用のグラデーション背景を作成します。
よくある質問
このツールは無料ですか？
はい、CSSグラデーション生成は完全に無料でご利用いただけます。利用回数の制限、ダウンロード画像への透かし、アカウント登録はありません。
データは安全ですか?
グラデーションの生成と画像の描画はすべてブラウザ内で直接行われます。色のデータ、CSSコード、画像がサーバーにアップロードされることはなく、作業内容は完全に非公開のままです。
線形、放射状、円錐グラデーションの違いは何ですか?
線形グラデーションは、指定した方向の直線に沿って色が移り変わります。放射状グラデーションは、中心点から円形または楕円形に外側へ広がります。円錐グラデーションは、中心点の周りをカラーホイールのように色が回り込みます。
グラデーションには何色まで使えますか?
1つのグラデーションに、2個から10個までのカラーストップを使えます。各ストップには専用のカラーピッカーと位置スライダーがあり、色の移り変わりを細かく調整できます。
CSSグラデーションはすべてのブラウザで使えますか?
線形グラデーションと放射状グラデーションは、すべての最新ブラウザで使えます。円錐グラデーションも、Chrome、Firefox、Safari、Edgeの現行バージョンで広くサポートされています。
ヒントとベストプラクティス
- 近い色相で控えめな効果に: カラーホイール上で近い色を組み合わせると、自然で上品ななめらかなグラデーションになります。
- カラーストップは控えめに: 2色から3色にすると、たいていいちばんきれいに仕上がります。ストップが多いと、位置を丁寧に調整しない限り、色の移り変わりが濁ることがあります。
- 代替色を設定: グラデーションを表示できないブラウザに備えて、グラデーションの宣言の前に必ず単色のbackground-colorを入れておきます。
- スポットライト効果には放射状を: 放射状グラデーションは、セクションの中央に注目を集めたり、注目させたい領域を強調したりするのに向いています。
- 複数の画面で確認: グラデーションはモニターやモバイル画面によって見え方が変わることがあるため、必ず複数の端末でプレビューしてください。
- ランダム生成を活用: 「ランダム」をクリックすると、思いつかなかった意外な色の組み合わせを見つけられます。