CSS3 グラデーション(gradient)の指定方法のデモページ

上下のグラデーション

background: -moz-linear-gradient(top, #990, #066);
background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));

左右のグラデーション

background: -moz-linear-gradient(left, #990, #066);
background: -webkit-gradient(linear, left top, right bottom, from(#990), to(#066));

グラデーションの途中に色を追加

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));

グラデーションの途中に色を複数追加

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));

グラデーションを透過する

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));

Copyright © 2010 CSS Lecture All rights reserved.