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

類似ツール：CSS とデザイン

コードを見栄えのよい共有用画像に変換。複数のテーマに対応

グラスモーフィズム効果をリアルタイムでプレビューし、ワンクリックで CSS コードをコピー

影の効果をインタラクティブに調整し、CSS の出力をリアルタイムでプレビュー

?

まだコメントはありません。最初のコメントを書いてみましょう！

CSS グラデーションジェネレーターでは、線形（Linear）・放射状（Radial）・円錐（Conic）の 3 種類のグラデーションをリアルタイムでデザインできます。カラーストップ、角度、位置を調整して、そのまま CSS をコピーできます。

3 種類のグラデーション：線形（Linear）は角度方向に変化し、放射状（Radial）は中心から外側へ広がり、円錐（Conic）は中心点を軸に回転します。円グラフやカラーホイールによく使われます。
角度の調整：線形と円錐では 0～360° の角度をスライダーまたは数値入力で正確に設定できます。回転ボタンをクリックするたびに 45° ずつ増えます。
カラーストップ：各ストップの色（ネイティブのカラーピッカー）と位置（0～100%）を個別に設定できます。ストップは最低 2 つ必要で、自由に追加できます。
厳選プリセット 10 種：Sunset、Ocean、Aurora、Conic Pride など多彩な効果を用意。クリックすると読み込まれ、そこから編集を続けられます。
大きなリアルタイムプレビュー：上部の高さ 192px のプレビュー領域と下部の細長いグラデーションバーが同期して更新され、実際の仕上がりをはっきり確認できます。
ワンクリックで CSS をコピー：「CSS をコピー」をクリックすると background: linear-gradient(...); 形式の CSS が取得でき、任意の CSS や style 属性に貼り付けられます。

CSS グラデーションジェネレーターはどのグラデーションの種類に対応していますか？

線形グラデーション（linear-gradient）、放射状グラデーション（radial-gradient）、円錐グラデーション（conic-gradient）に対応しています。

生成された CSS コードをコピーするには？

コードボックスの横にあるコピーボタンをクリックすると、CSS がクリップボードにコピーされます。

カラーストップを複数追加できますか？

はい。グラデーションスライダー上のストップをドラッグしたり、追加・削除したりできます。