CSS グラデーション生成
線形・円形グラデーションを視覚的にデザインし、すぐに使える CSS をコピー。すべてブラウザ内でライブ更新されます。
CSS グラデーションの作り方
- 線形または円形を選び、線形グラデーションの角度を設定します。
- ストップの色を選び、各位置を 0 から 100 で設定します。
- ストップを追加・削除して、好きなように色の変化を調整します。
- 生成された CSS をスタイルシートや style 属性にコピーします。
よくある質問
線形グラデーションとは何ですか?
線形グラデーションは、選択した角度 (0 から 360 度) の直線に沿って色をブレンドします。
円形グラデーションとは何ですか?
円形グラデーションは、中心点から外側へ円形または楕円形に色をブレンドします。
位置の数字は何を意味しますか?
各位置はグラデーションに沿ったパーセンテージで、開始の 0% から終了の 100% までです。ストップは位置の順に自動で並べ替えられます。
グラデーションはすべてのブラウザで動作しますか?
はい。生成される CSS は、すべての最新ブラウザが対応する標準の linear-gradient と radial-gradient 関数を使用します。
関連ツール
グラデーション生成ツールを使う理由
CSS グラデーション生成ツールを使えば、コードで値を推測する代わりに視覚的に滑らかな色の変化をデザインし、本番で使える CSS を即座にコピーできます。
- 色、角度、ストップを調整するとグラデーションがライブで変化するのを確認できます。
- 構文ミスを探すことなく、正確で有効な CSS をコピーできます。
- ボタン、バナー、セクション用の複数ストップ背景を数秒で作成できます。
ヒントと制限
カラーストップは好きなだけ追加でき、グラデーションが常に有効になるよう少なくとも 2 つは保持されます。CSS 生成前にストップは位置の順に並べ替えられます。