グラデーション

CSS3 グラデーション

  • background に指定することで、ボックスの背景色を線形にグラデーションに指定する値です。

（※ブラウザによって記述方法が変わりますので注意が必要です。

mozilla系ブラウザ
  • -moz-linear-gradient(方向, 開始色, 終了色;)
background:-moz-linear-gradient(top, #990, #066);


方向

  • top：上から下
  • left：左から右
  • left top：左上から右上
webkit系ブラウザ
  • -moz-linear-gradient(方向, 開始色, 終了色)
background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
-方向（直線的, 開始位置, 終了位置, 開始色, 終了色）



<!DOCTYE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 グラデーション</title>
<style>
#grad1, #grad2, #grad3, #grad4, #grad5 {
  width: 300px;
  height: 200px;
  margin: 30px 50px;
}
#grad1 {
  background: -moz-linear-gradient(top, #990, #066);
  background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
}
#grad2 {
  background: -moz-linear-gradient(left, #990, #066);
  background: -webkit-gradient(linear, left top, right bottom, from(#990), to(#066));
}
#grad3 {
  background: -moz-linear-gradient(left top, #990, #f60 50%, #066);
  background: -webkit-gradient(linear, left top, right bottom, from(#990), color-stop(0.5, #f60), to(#066));
}
#grad4 {
  background: -moz-linear-gradient(left top, #990, #c36 30%, #f60 50%, #000 70%, #066);
  background: -webkit-gradient(linear, left top, right bottom, from(#990), color-stop(0.3, #c36), color-stop(0.5, #f60), color-stop(0.7, #000), to(#066));
}
#grad5 {
  background: -moz-linear-gradient(top, rgba(60,100,50,0.5), #066);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(60,100,50,0.5)), to(#066));
}
</style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>
<div id="grad4"></div>
<div id="grad5"></div>
</body>
</html>
  • 解説

<!DOCTYE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 グラデーション</title>
<style>
#grad1, #grad2, #grad3 {
  width: 300px;
  height: 200px;
  margin: 30px 50px;
}
#grad1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc));
  background-image: -moz-linear-gradient(#333, #ccc);
  background-image: linear-gradient(#333, #ccc);
}
#grad2 {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#ffcc00), color-stop(0.50, #ff6600), color-stop(0.50, #ff3300), to(#ff6600));
  background-image: -moz-linear-gradient(-45deg, #ffcc00 0%, #ff6600 50%, #ff3300 50%, #ff6600);
  background-image: linear-gradient(-45deg, #ffcc00 0%, #ff6600 50%, #ff3300 50%, #ff6600);
}
#grad3 {
  background-image: -webkit-gradient(radial, center center, 0, center center, 50, from(#9cf), to(#369));
  background-image: -moz-radial-gradient(110px 50px, circle closest-side, #9cf 0%, #369 100%);
  background-image: radial-gradient(110px 50px, circle closest-side, #9cf 0%, #369 100%);
}</style>
</head>
<body>
<div id="grad1"></div>
<div id="grad2"></div>
<div id="grad3"></div>
</body>
</html>