CSS Gradient

使い方

1. グラデーションのタイプを選びます：リニアまたはラジアル。
2. リニアの場合は角度を度で設定します。90 度は上から下です。
3. カラーピッカーでカラーストップを追加します。初期は 2 つ、「色を追加」で最大 6 つまで。ストップは等間隔に配置されます。
4. 何を変えてもライブプレビューが即座に更新されます。気に入ったらコードボックスから完成した CSS をコピー。

よくある用途

• ボタンとバナー —— CTA 要素に単色の代わりに滑らかな 2 色のグラデーションを。
• ヒーローセクションの背景 —— 見出しの背後に控えめなラジアルの光を敷く。
• チャートとダッシュボード —— グラデーション塗りが必要な系列向けの分類カラーランプを統一。
• CSS の学習 —— 角度やストップ位置が描画結果をどう変えるかを即座に確認。

よくある質問

Q: ラジアルモードで角度ボックスが消えるのは？ A: ラジアルグラデーションは中心から外へ広がるため角度という概念がありません。方向が関与するのはリニアのみで、角度は色のラインが走る向きを制御します。

Q: ストップ位置はどう決まりますか？ A: ストップはグラデーション上に等間隔で配置され、3 色なら 0%、50%、100% になります。独自の間隔にしたい場合は CSS をコピーしてパーセントを直接編集してください。標準構文なのでドキュメントも豊富です。

Q: 出力はプリプロセッサやフレームワークでも使えますか？ A: 使えます。出力は 1 つの標準的な background-image 宣言なので、プレーン CSS、インラインスタイル、Sass、Tailwind の任意値、CSS-in-JS すべてにそのまま流用できます。