CSSグラデーションジェネレーター｜色・角度をリアルタイムで作成

CSSグラデーションジェネレーターの使い方

このツールでは、色・角度・カラーストップの位置を調整しながら、CSSグラデーションをリアルタイムで作成できます。完成したCSSはワンクリックでコピーできるため、Webサイトやブログの背景、ボタン、見出しなどへすぐに使用できます。

1. 種類を選択する：「線形」または「円形」からグラデーションの種類を選びます。
2. 角度や位置を調整する：線形では角度、円形では形状と中心位置を設定します。
3. 色を設定する：カラーピッカーまたはカラーコードを使って色を変更します。
4. 位置と透明度を調整する：各色の表示位置と透明度を個別に設定します。
5. CSSをコピーする：プレビューを確認し、「CSSをコピー」を押します。

線形グラデーションと円形グラデーションの違い

線形グラデーション

線形グラデーションは、指定した角度に沿って色が直線的に変化します。横方向や縦方向だけでなく、斜め方向のグラデーションも作成できます。背景やボタン、見出しの装飾など幅広い用途に向いています。

円形グラデーション

円形グラデーションは、指定した中心位置から外側へ向かって色が変化します。円または楕円を選択でき、光やぼかし、背景のアクセントを表現したい場合に便利です。

カラーストップの位置と透明度

カラーストップとは、グラデーション内で各色を配置する位置のことです。0%は開始位置、100%は終了位置を表します。色ごとに位置を変更することで、色の切り替わり方やグラデーションの範囲を細かく調整できます。

透明度は0から1の範囲で指定します。0は完全な透明、1は完全な不透明です。半透明を使用すると、背景画像や下地の色を生かしたグラデーションも作成できます。

生成されたCSSの使い方

コピーしたCSSを、グラデーションを表示したい要素のCSSへ貼り付けます。生成コードには単色の背景色とグラデーションが含まれているため、グラデーションに対応していない環境でも背景色を表示できます。

クラス名やセレクターは生成されないため、使用する要素に合わせて自由に指定してください。

よくある質問

色は何色まで追加できますか？

最大6色まで追加できます。各色の位置と透明度も個別に調整できます。

スマートフォンでも利用できますか？

スマートフォンやタブレットにも対応しています。画面上で設定を変更し、生成されたCSSをコピーできます。

作成したグラデーションを商用サイトで使用できますか？

生成されたCSSは、個人・商用を問わず自由に使用できます。クレジット表記も必要ありません。

設定を最初の状態に戻せますか？

「初期設定に戻す」ボタンを押すと、色・角度・位置・透明度を初期状態へ戻せます。

関連ツール

CSSで三角形を作りたい場合は、CSS三角形ジェネレーターを利用してください。方向・幅・高さ・色を調整しながら、通常要素や疑似要素に使用できるCSSを作成できます。