円形グラデーション(radial-gradient)ジェネレーター
円形・楕円形のCSS放射状グラデーションをリアルタイムに作成できます
円形または楕円形の放射状グラデーションを作成し、カラーストップ(最大5個)・中心位置・形状を調整しながら結果をその場で確認できるツールです。Webの背景やボタン、カードデザインに使うCSSコードがすぐ欲しいデザイナーやフロントエンドエンジニアに便利です。処理はすべてブラウザ内で即座に行われ、サーバーに送信されるデータはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 形状を円形(circle)または楕円形(ellipse)から選びます
- 3×3の位置グリッドでグラデーションの中心となる位置をクリックします
- カラーストップの色と位置(%)を調整し、必要に応じてストップを追加・削除します
- プレビューで仕上がりを確認したうえで、生成されたCSSコードをコピーします
よくある質問
- カラーストップはいくつまで追加できますか?
- 最小2個から最大5個まで追加でき、それぞれのストップの色と位置を個別に調整できます。
- 生成されたCSSはどう使えばよいですか?
- コピーボタンを押すと、background プロパティにそのまま貼り付けられる radial-gradient のCSSコードが取得できます。
- 中心位置はどのように指定しますか?
- 3×3のグリッドから top left、center、bottom right など9種類のキーワード位置のいずれかをクリックして選びます。