PixConvert

CSSグラデーションジェネレーター

美しいCSSグラデーションを視覚的に作成しましょう。色、停止位置、方向を調整し、すぐに使えるCSSコードをコピーを。

°

色の停止

0%
100%

CSS出力

background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

PixConvertグラデーションジェネレーターを使用する理由

視覚的なグラデーションビルダーで、CSS出力が即座に行えます。16進数値を推測する必要はありません。

直線および放射状

任意の角度で直線グラデーションを作成したり、形状と位置を自由に設定できる放射状グラデーションを作成したりできます。

複数のカラーストップ

ドラッグ可能な位置で最大10個のカラーストップを追加できます。rgbaやhslaを含むあらゆるCSSカラーに対応しています。

角度制御

角度ダイヤルをドラッグするか、正確な度数を入力してください。よく使われる方向（右、右下）はプリセットされています。

ライブプレビュー

値を調整すると、全幅グラデーションのプレビューがリアルタイムで更新されます。

すぐに貼り付けられるCSS

出力は、任意のスタイルシートに貼り付けることができる、クリーンなCSSの背景プロパティ文字列です。

ランダム化

ランダム化ボタンを押すと、すぐにインスピレーションが湧き、美しいランダムなグラデーションの組み合わせが生成されます。

CSSグラデーションの使用例

グラデーションは現代のUIデザインにおいて至るところで見られる。

ヒーローの背景

ランディングページのヒーローセクション用に、リッチな背景グラデーションを作成します。

  • 全面ヒーロー背景
  • セクション区切りグラデーション
  • 画像にグラデーションを重ねる

ボタン＆カードのスタイリング

ボタン、カード、バッジに、繊細なグラデーション塗りつぶしで奥行きを加えましょう。

  • プライマリアクションボタンのグラデーション
  • カードヘッダーのアクセント
  • プログレスバーが満たされる

ブランドデザイン

ブランドイメージに合致し、カラーパレットに合わせたグラデーションを作成しましょう。

  • ロゴの背景グラデーション
  • アプリのアイコンの背景
  • ソーシャルメディアのアセット

CSSグラデーションの作成方法

1

直線型、放射状型、円錐型から選択してください。色を選び、停止位置を調整してください。角度または方向を設定してください。

2

ライブプレビューは即座に更新されます。「CSSをコピー」をクリックすると、すぐに使用できるCSSの背景値がコピーを。

3

直線型と放射状型を切り替え、角度や形状を調整して、作成した背景をスタイルシートに貼り付けてください。

その他のツールを見る

このツールと併用すると非常に便利な他の無料ツールも見つけてみましょう。

utility

コントラストチェッカー

WCAG準拠のために色のコントラスト比を確認してください。

Try it
utility

ボックスシャドウジェネレーター

ライブプレビュー付きでCSSのbox-shadowをデザイン

Try it
utility

カラーコンバーター

HEX、RGB、HSLカラーコードを瞬時に変換

Try it
utility

カラーパレット抽出ツール

あらゆる画像から主要な色を抽出する

Try it
utility

JSONフォーマッター

JSONを瞬時にフォーマット、検証、および圧縮します。

Try it
utility

正規表現テスター

正規表現をリアルタイムでテストおよびデバッグする

Try it

よくある質問

CSSグラデーションについて解説します。

CSSグラデーションとは何ですか？

CSSグラデーションとは、画像を使用せず、純粋なCSSで定義された2つ以上の色間の滑らかな変化のことです。種類としては、線形グラデーション（方向性）、放射状グラデーション（円形／楕円形）、円錐グラデーション（中心点を中心に回転）があります。

-webkit- という接頭辞は必要ですか？

いいえ、最新のブラウザ（Chrome 26以降、Firefox 16以降、Safari 7以降）では不要です。-webkit- プレフィックスは、非常に古いブラウザでのみ必要です。IE10以前のSafariをサポートする必要がある場合は、オプションで有効にしてください。

透明なグラデーションを作成するにはどうすればよいですか？

RGBAカラーを使用してください。例えば、透明にはrgba(0, 0, 0, 0)を使用します。透明にフェードさせるには、白から透明へのフェードの場合はrgba(255,255,255,0)、黒から透明へのフェードの場合はrgba(0,0,0,0)をエンドストップとして設定します。

グラデーションにCSS変数を使用できますか？

はい、ただしこのビジュアルツールは16進数/RGBA値を生成します。CSSカスタムプロパティを使用するには、出力をコピーを、色の値を手動で変数に置き換えてください（例：var(--color-primary)）。

どのブラウザが円錐グラデーションをサポートしていますか？

conic-gradient は Chrome 69 以降、Edge 79 以降、Safari 12.1 以降、Firefox 83 以降でサポートされています。Internet Explorer ではサポートされていません。プログレッシブ エンハンスメントのフォールバックには、@supports (背景: conic-gradient(red, blue)) を使用してください。