CSS สร้าง Gradient Background

CSS สำหรับสร้าง Gradient Background โดยสร้าง class ชือ gradient โดยรวม Code ในการใช้งานจะมี กำหนด parameter ดังนี้

Start Color - สีแรก ในตัวอย่างนี้ผมจะใช้  สีขาว (#FFFFFF) 
End Color - สีที่สอง ในตัวอย่างนี้ผมจะใช้ สีน้ำเงิน (#0A82D7)

แบบ linear

.gradient-linear {
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #0A82D7 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #0A82D7 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #0A82D7 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #0A82D7));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #0A82D7 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to top, #FFFFFF 0%, #0A82D7 100%);
}

แบบ circular

.gradient-circular{
    /* IE10 Consumer Preview */ 
    background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Opera */ 
    background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(1, #0A82D7));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #0A82D7 100%);
}


แบบ elliptical
.gradient-elliptical{
    /* IE10 Consumer Preview */ 
    background-image: -ms-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Opera */ 
    background-image: -o-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(1, #0A82D7));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(left top, ellipse farthest-corner, #FFFFFF 0%, #0A82D7 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #0A82D7 100%);
}