CSS 放射グラデーション ジェネレーター カスタムの形状、位置、および色を持つCSS放射グラデーションを作成します。

What Is 放射グラデーションジェネレーター?

ラジアルグラデーションジェネレーターは、中心点から円形または楕円形のパターンで外側に放射するCSSグラデーションを作成します。直線沿いに遷移するリニアグラデーションとは異なり、ラジアルグラデーションはスポットライトのような効果、光る球体、深度効果を生成し、これらはモダンワェブデザインで一般的に使用されています。グラデーションの形状（円または楕円）、中心位置、および色を制御できます。ジェネレーターは、すべてのモダンブラウザで動作するCSS radial-gradient() コードを生成します。ラジアルグラデーションは、視覚的な深度、ヒーロー要素のスポットライト効果、装飾背景、およびフラットデザインに次元感を与える繊細な照明効果を作成するのに特に有効です。

Why Use 放射グラデーションジェネレーター?

• 異なる効果のための円と楕円の形状オプション
• X/Y スライダーで調整可能な中心位置
• 設定の変更に応じてリアルタイムでプレビューが更新される
• クリーンで本番環境向けの CSS 出力
• サインアップ不要で無料で使用できます

Common Use Cases

スポットライト効果

ヒーロー セクションや製品画像に焦点を当てるスポットライト効果を作成します。

グロー効果

カード、モーダル、または装飾要素用の輝くオーブ背景を生成します。

深度と次元

微妙な放射状色遷移でフラット デザインに視覚的な深度を追加します。

ヴィネット効果

画像の上に暗いエッジのヴィネットを作成して映画のような見た目を実現します。

Technical Guide

CSS radial-gradient() は、点から放射するグラデーションを作成します。構文は: radial-gradient(形状 at ポジション, 色1, 色2) です。形状は "circle" (すべての方向に均等な半径) または "ellipse" (要素のアスペクト比と一致する半径) のいずれかになります。ポジションでは、パーセント値 (50% 50% は中心) を使用します。closest-side や farthest-corner などのサイズキーワードは、グラデーションの範囲を制御します。色のストップはリニアグラデーションと同じように機能します。ブラウザは、中心から外側に向かって同心円または楕円で色を補間します。ラジアルグラデーションは合成可能です - バックグラウンドイメージにカンマ区切りで複数のラジアルグラデーションを重ねることで、複数の光源のような複雑な効果を作成できます。

Tips & Best Practices

• 1
  完全な丸みを帯びたグラデーションには "円" を、長さと幅の比率に応じた形状には "楕円" を使用します
• 2
  非対称な照明効果を作成するために中心位置を (例: 30% 30%) のようにオフセンターに設定します
• 3
  複数の放射状グラデーションを重ねて複雑なマルチ ライト ソース効果を作ります
• 4
  背景の上に微妙なフェードアウト効果を実現するために、端の色として透明を使用します
• 5
  バックグランド ブレンド モードと組み合わせて創造的なオーバーレイ効果を作ります

Related Tools

カラーピッカー

HEX、RGB、HSL、CMYK形式の出力に対応したインタラクティブなカラーピッカー。

🎨 Color Tools

線形グラデーション生成ツール

カスタム色、角度、色の停止を使用したCSS線形グラデーションを作成します。

🎨 Color Tools

コニックグラデーションジェネレーター

パイチャート、カラーホイール、スウィープ効果用のCSSコニックグラデーションを作成します。

🎨 Color Tools

カラーミキサー

2つの色を任意の比率で混合し、グラデーション全体を見てみましょう。

🎨 Color Tools

CSS フィルタージェネレーター

ぼかし、明るさ、コントラストなどのようなCSSフィルター効果を視覚的な操作で適用します。

🎨 CSS & Design

Frequently Asked Questions

Q 円と楕円の違いは何ですか?

円は要素の寸法に関係なく完全に丸いグラデーションを作成します。楕円は要素の長さと幅の比率に応じて伸縮し、正方形以外の要素では卵型の形状になります。

Q 中心位置をどこにでも設定できますか?

はい、X と Y の位置スライダー (0-100%) を使用して中心位置を設定できます。デフォルトは 50% 50% (中央) です。中心位置を移動すると非対称な照明効果が作成されます。

Q 放射状グラデーションはすべてのブラウザーでサポートされていますか?

はい、radial-gradient() はベンダー プレフィックスなしですべてのモダン ブラウザーでサポートされます。

About This Tool

放射グラデーションジェネレーター is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.