🎨 放射状グラデーションジェネレーター

円形または楕円形の放射状グラデーションを、形状・開始位置・最大5つのカラーストップを調整しながらその場で確認できるツールです。背景やボタン、カードデザインに使うCSSコードが必要なデザイナーやフロントエンド開発者に役立ちます。処理はすべてブラウザ内で完結し、サーバーに送信されるデータはありません。

使い方

1. 形状を円形または楕円形から選択します
2. 3x3のグリッドをクリックしてグラデーションの開始位置を指定します
3. 各カラーストップの色と位置(%)を調整し、必要に応じて追加・削除します
4. プレビューで結果を確認し、生成されたCSSコードをコピーします

よくある質問

カラーストップは何個まで追加できますか?

最小2個から最大5個まで追加でき、各ストップの色と位置を個別に調整できます。

生成されたCSSはどう使いますか?

コピーボタンを押すと、background プロパティにそのまま貼り付けられる radial-gradient のCSSコードが取得できます。

位置の指定方法は?

3x3グリッド上で top left や center、bottom right など9つのキーワード位置から選んでクリックします。