今回は原色大辞典のグラデーションメーカーを使ってグラデーションの背景を作ってみました!
5色までのグラデーションを作れます。
超便利。
左右のグラデーション
次のコードを追加すると左右のグラデーションになります。
background: linear-gradient(to right, #ffe8f3, #ff3672, #fff0f5)
#の部分を入れ替えると自由にグラデーションが作れます。
<div style="background: linear-gradient(to right, #ffe8f3, #ff3672, #fff0f5); padding: 10px; border: 5px solid #FFC0CB;">本文を入れる</div>
文字の色を変えたいときは次のコードを追加。
<p style="color: #008080;">ここに文章</p>
<div style="background: linear-gradient(to right, #ffe8f3, #ff3672, #fff0f5); padding: 10px; border: 5px solid #FFC0CB;"><p style="color: #008080;">本文を入れる</p></div>
本文を入れる
上下のグラデーション
次のコードを追加すると上下のグラデーションになります。
background: linear-gradient(to bottom, #ffe8f3, #ff3672, #fff0f5)
<div style="background: linear-gradient(to bottom, #ffe8f3, #ff3672, #fff0f5); padding: 10px; border: 5px solid #FFC0CB;"><p style="color: #990000;">本文を入れる</div>
本文を入れる
すごく簡単に作れますね!