CSSグラデーションを視覚的に作成
グラデーションは、画像ファイルを一切使わずに、ボタン、ヒーローセクション、カード、背景に奥行きと彩りを与えます。しかし、手作業でコードを書くとなると、角度やパーセンテージを推測し、何度もページをリロードして確認しなければなりません。このCSSグラデーションジェネレーターを使えば、ライブプレビューを見ながら視覚的にデザインでき、すべてのモダンブラウザで動作する、コピーしてすぐに使えるクリーンなCSSコードを取得できます。
機能
- 3種類のグラデーション: 線形（linear）、放射状（radial: 円または楕円）、円錐（conic）。
- 最大8つのカラーストップ: 位置をドラッグで調整可能。
- 角度スライダー: 線形および円錐グラデーション用。
- プリセットとランダムボタン: すぐにインスピレーションを得たい時に。
- フォールバック用の単色カラー: CSSコードに含まれます。
- コードをコピー: ワンクリックで完了。
CSSの使い方
スタイルを適用したい要素のCSSルールにコードを貼り付けます：
.hero {
background: #0ea5e9;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}
CSSにおいてグラデーションは画像として扱われるため、background-imageで使用したり、カンマ区切りで複数のグラデーションを重ねたり、写真と組み合わせたりすることも可能です。例えば、background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); のように指定すると、写真が暗くなり、上に配置した白いテキストが読みやすくなります。
デザインのコツ
- 控えめにする。 青から紫、オレンジからピンクなど、隣り合う2つの色相を組み合わせると、反対色を使うよりも滑らかでモダンな印象になります。
- コントラストを確認する。 グラデーションの上にテキストを配置する場合は、両端のどちらの色でも読みやすいか確認してください。コントラスト比を表示できるカラーコンバーターでのテストをおすすめします。
- ブランド画像から色を抽出するには、画像カラーピッカーを使用します。
- カードやボタンに立体感を出すには、box-shadowジェネレーターを使用します。