CSSだけで背景にグラデーションをかける方法です。
グラフィックソフト不要で、CSSだけでキレイなグラデーション背景が作れます。
主にbackground: linear-gradient()を使用します。
CSS
|
1 2 3 4 5 |
.box { background: linear-gradient(to right, #f06, #4a90e2); } |
斜めや縦方向にも対応
|
1 2 3 4 5 6 |
/* 上から下へ */ .box { background: linear-gradient(to bottom, #fff, #ccc); } |
to right や to bottom left などで方向指定可能です。
2色以上の指定や透過色（rgba）も使用できます。
