CSSグラデーションジェネレーター
最大4色の線形または放射状グラデーションを作成し、すぐに使用できるCSSコードをコピーします。
CSSグラデーションをオンラインで作成する方法
グラデーションのタイプを選択
目的の効果に応じて、線形または放射状を選択します。
色を追加して調整
最大4つの色を追加し、その順序を変更し、グラデーションの角度または位置を調整します。
CSSコードをコピー
コピーボタンを押して、コードをスタイルシートに直接貼り付けます。
グラデーションジェネレータに関するよくある質問
グラデーションは、ウェブデザインに深さとスタイルを与えるシンプルな方法です。このツールは、手動で記述することなく、必要な正確なCSSコードを生成します。
どのような種類のグラデーションが作成できますか？
+
直線グラデーション（任意の角度）と放射状グラデーションを作成できます。
何色まで使用できますか？
+
同じグラデーション内に2～4色を組み合わせることができます。
コードはすべてのブラウザで機能しますか？
+
はい、標準的なCSSシンタックスで生成され、すべての最新ブラウザと互換性があります。
プログラムをインストールする必要はありますか？
+
いいえ、何もインストールする必要はありません。ブラウザから直接動作します。
無料ですか？
+
はい、このツールは完全に無料です。
グラデーションを画像の背景として使用できますか？
+
生成されたコードは純粋なCSSです。画像が必要な場合は、プレビュー画面のスクリーンショットを撮ることができます。
色
カラーコンバーター（HEX、RGB、HSL、CMYK）
HEX、RGB、HSL、CMYKの間で任意の色を瞬時に変換でき、ライブプレビューと最も近い色名を表示します。
カラーパレットジェネレータ
ベースカラーから5色の調和したパレット（補色、類似色、三色配色、単色配色）を作成します。
WCAGコントラストチェッカー
テキストと背景色の組み合わせがAA および AAA のアクセシビリティレベルを満たしているかを確認します。
ランダムカラー
クリック1つでランダムに色を生成し、その名前、HEX/RGB/HSLコード、および類似色を発見できます。
カラーピッカー（スポイト）
ブラウザのスポイトツールを使用して画面から任意の色を選択するか、クラシックなカラーピッカーを使用します。
色盲シミュレーター
画像をアップロードして、一色型色覚異常、二色型色覚異常、または三色型色覚異常の人がどのように見えるかを確認します。
メッシュグラデーションジェネレーター
メッシュグラデーション（ぼかされた色のパッチ）で背景を作成し、PNGでダウンロードするか、CSSコードをコピーします。
色合いと陰影ジェネレーター
任意の色のより明るい色合いと最も暗い陰影をHEXコード付きで自動生成します。
カラーミキサー
2つの色を混ぜて、HEXコード付きで段階的に中間色を発見します。
カラーホイール（調和）
ホイール上で色を選択して、調和のとれた組み合わせを発見してください：補色、類似色、三色配置など。
画像からのパレット抽出ツール
画像をアップロードすると、その支配的な色を自動的に抽出し、各色のHEXコード付きのパレットを生成します。
画像の平均色
画像をアップロードして、HEX、RGB、HSLコード付きの平均色を瞬時に計算します。
