CSSグラデーション生成

概要

2色と角度を選ぶだけで線形CSSグラデーションを視覚的に作成し、そのまま使えるCSSをコピーできます。構文を覚えなくても背景・ボタン・ヒーローセクションの装飾が作れます。

使い方

1. 開始色と終了色を選びます。
2. ライブプレビューを見ながら角度を調整します。
3. 生成された linear-gradient() のCSSをコピーしてスタイルシートに貼り付けます。

使用例

• ヒーロー背景

  入力: 紫から青、135deg

  出力: background: linear-gradient(135deg, #8b5cf6, #3b82f6);

• ボタンのアクセント

  入力: オレンジからピンク、90deg

  出力: CTAボタン用の水平2色グラデーション

補足

• 生成できるのは線形グラデーションです。放射状は radial-gradient() を手書きしてください。
• 色停止点を増やしたい場合は、生成されたCSSをエディタで編集して追加できます。
• 上に載せるテキストとのコントラストを、特にダークモードで確認してください。

よくある質問

3色以上のグラデーションは作れますか？

出力は2色です。linear-gradient(90deg, red, yellow, green) のように手動で停止点を追加してください。

角度はどういう意味ですか？

0deg が上方向で、時計回りに増えます。90deg は左→右、180deg は上→下です。

グラデーションは表示性能に影響しますか？

CSSグラデーションはブラウザ描画のため、画像ファイルより一般に軽量です。

このツールを埋め込む

以下のiframeをHTMLページに貼り付けると、CSSグラデーション生成をあなたのサイトに埋め込めます: