CSS3サンプル / gradient

■線形グラデーション：基本

■線形グラデーション：透過

■線形グラデーション：グラデーションの追加

■線形グラデーション：斜めにグラデーション

■線形グラデーション：背景色とグラデーションを同時に指定

■線形グラデーション：縞模様にする

firstfirst

secondsecond

thirdthird

forthforth

■CSS記述例
div.gradient p {
    width:400px;
    color:#ffffff;
    text-align:center;
    font-weight:bold;
    padding:80px 20px;
    /* border-radius */
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

div.gradient p.gra01 {
    /* gradient */
    background: -moz-linear-gradient(top, #cc0000, #ccff00);
    background: -webkit-gradient(linear, left top, right top, from(#cc0000), to(#ccff00));
}

div.gradient p.gra02 {
    /* gradient */
    background: -webkit-gradient(linear, left top, right top, from(rgba(204,0,0,1.0)), to(rgba(255,255,255,0)));
}

div.gradient p.gra03 {
    /* gradient */
    background: -webkit-gradient(linear, left top, right top, from(#cc0000), color-stop(0.5, #ffcc00), to(#ccff00));
}

div.gradient p.gra04 {
    /* gradient */
    background: -webkit-gradient(linear, left top, right bottom, from(#cc0000), color-stop(0.5, #ffcc00), to(#ccff00));
}

div.gradient p.gra05 {
    /* gradient */
    background-color:#000000;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(204,0,0,1.0)), to(rgba(255,255,255,0)));
}

div.gradient pre {
    /* gradient */
    width:400px;
    padding:20px;
    background-color:#ffffff;
    background-image: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0, rgba(255,255,255,0)),
        color-stop(0.1, rgba(230,244,222,0)),
        color-stop(0.1, rgba(230,244,222,1.0)),
        color-stop(0.2, rgba(230,244,222,1.0)),
        color-stop(0.2, rgba(230,244,222,0)),
        color-stop(0.3, rgba(230,244,222,0)),
        color-stop(0.3, rgba(230,244,222,1.0)),
        color-stop(0.4, rgba(230,244,222,1.0)),
        color-stop(0.4, rgba(230,244,222,0)),
        color-stop(0.5, rgba(230,244,222,0)),
        color-stop(0.5, rgba(230,244,222,1.0)),
        color-stop(0.6, rgba(230,244,222,1.0)),
        color-stop(0.6, rgba(230,244,222,0)),
        color-stop(0.7, rgba(230,244,222,0)),
        color-stop(0.7, rgba(230,244,222,1.0)),
        color-stop(0.8, rgba(230,244,222,1.0)),
        color-stop(0.8, rgba(230,244,222,0)),
        color-stop(0.9, rgba(230,244,222,0)),
        color-stop(0.9, rgba(230,244,222,1.0)),
        color-stop(1.0, rgba(230,244,222,1.0))
        );
}