CSSグラデーション

背景用のCSSスニペットです。Photoshopのグラデプリセットでも、PNG書き出しでもありません。

ヒーローの背景を、画像ファイルにしたくない——CSSのグラデです。配色の出発点はカラーパレットです。

このタブで linear-gradient などを組み立てます。カードの影はボックスシャドウ、pxとremはCSS単位換算です。

background: linear-gradient(135deg, #1e3a5f, #f4f1ea);

HTMLやSVGのサンプルは、フェンス内だけに置きます。

向いているとき

• 実装者が、カンプの角度をCSSに落とす。
• 画像背景をやめて、バイトを減らす。

向いていないとき: 印刷用スウォッチ、メッシュグラデの高度なシェーダ。

使い方

1. 色と角度、停留点を調整します。
2. CSSをコピーします。
3. 文字の上に置くなら、最悪の2色をコントラストチェックへ。

制限

• すべてのブラウザの古い構文は出しません。
• 画像としての書き出しはプレースホルダー画像や、別のキャプチャ手段へ。