背景グラデーション

linear-gradient:ほとんどのブラウザ(IE10以降)でベンダープレフィックス必要なし。
※但し「transparent」はsafariで上手く表示されない場合があるので「rgba(255, 255, 255, 0)」にしておくことで回避。

パターンA

.gradationA { background-image: linear-gradient(180deg, #e0e7e9, #faf9f6, #e0e7e9); }

パターンB

.gradationB { background-image: linear-gradient(45deg, #cbecf5, #f5eac3, #fcdefb, #c8d6f5); }

パターンC

.gradationC { background-image: linear-gradient(45deg, #7db5df 0% 10%, #d8e6fa 10%, #fbfcfb, #d1f0f8 90%, #67bcd3 90% 100%); }

パターンD

.gradationD { linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%); }

パターンE

.gradationE { background-image: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); }

パターンF

.gradationF { background-image: radial-gradient(circle at 10px 20px, #f4c14e 0% 20%, #c0563e 55% 100%); }
背景

前の記事

背景チェック
飾り枠

次の記事

装飾:お知らせリンク