ホームページ・Web制作
CSS3の知識・困った解決のページ
グラデーションの効果をつける
グラデーションの例
線形（縦方向）
Sample
線形（横方向）
Sample
線形（斜め方向）
Sample
円形
Sample
楕円形
Sample
グラデーションのコード
線形（縦方向）
#sample {
padding: 2em;
background: linear-gradient(silver 10%, steelblue 50%, #00143f);
text-align: center;
color:white;
}
線形（横方向）
background: linear-gradient(to right ,silver 10%,steelblue 50%,#00143f);
線形（斜め方向）
background: linear-gradient(to right ,silver 10%,steelblue 50%,#00143f);
円形
background: radial-gradient(silver 10%, steelblue,#1f0f0f);
楕円形
background: radial-gradient(ellipse 150px 80px at 20% 15px,silver 10%, steelblue,#1f0f0f);
解説
CSS3では背景画像にグラデーションを設定することができます。
円形・楕円形のグラデーションは中心点（開始点）を指定することができます。省略した場合は、中央が中心になります。
メモ
円形・楕円形グラデーションのサイズを指定するプロパティもあります。
作成日：