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

CSSのlinear-gradient(線形)やradial-gradient(放射状)のコードを視覚的に作成できます。

カラーストップ

+ カラーストップを追加 リセット

このツールの使い方

特徴

• ブラウザ内完結:設定内容はサーバーに送信されません。
• 6つのグラデーションタイプ:リニア・ラジアル・コニカル・繰り返しリニア・繰り返しラジアル・繰り返しコニカルに対応しています。
• リアルタイムプレビュー:変更が即座に反映されます。
• 柔軟なカラーストップ:色と位置を自由に設定できます。
• 多様な方向設定:12種類の方向から選択できます。
• ワンクリックコピー:CSSコードを簡単にコピーできます。
• レスポンシブ対応:スマホ・タブレットでも快適に操作できます。
• 完全無料:登録不要で今すぐ使えます。

よくある使用例

• Webサイトの背景デザイン
• ボタンやカードのグラデーション装飾
• ヒーローセクションの背景
• テキストグラデーション効果
• モダンなUIデザインの作成
• ダークモードのグラデーション設計

注意点

設定内容はブラウザ上でのみ処理され、サーバーには保存されません。安心してご利用ください。古いブラウザでは一部のグラデーション機能が正しく表示されない場合があります。

CSSグラデーションについて

リニアグラデーション(linear-gradient)

直線的に色が変化するグラデーションです。方向を指定でき、複数の色を滑らかに遷移させることができます。背景や装飾に広く使われています。

ラジアルグラデーション(radial-gradient)

中心から外側に向かって放射状に色が変化するグラデーションです。円形または楕円形の形状を選択でき、スポットライト効果やボタンの装飾に適しています。

コニカルグラデーション(conic-gradient)

中心点を軸に回転しながら色が変化するグラデーションです。円錐状・扇形に色が展開され、カラーホイール、円グラフ、進捗インジケーターなどの作成に最適です。開始角度を指定することで、グラデーションの向きを調整できます。

繰り返しグラデーション(repeating-*-gradient)

グラデーションパターンを繰り返して表示します。ストライプ模様、チェック柄、同心円パターンなど、規則的な反復デザインの作成に便利です。repeating-linear-gradient(縞模様)、repeating-radial-gradient(同心円)、repeating-conic-gradient(放射状パターン)の3種類があります。

カラーストップとは

カラーストップは、グラデーション内の特定の位置における色を定義します。位置は0%(開始点)から100%(終了点)までのパーセンテージで指定します。複数のカラーストップを組み合わせることで、複雑で美しいグラデーションを作成できます。