How to Use Gradient Colors in Website Using HTML & CSS?

A gradient is the gradual mixing from one color to another. It allows the designer to almost create a novel color. In order to make the effective use of the gradient colors, it is important to know about your audience.

Here :nth selector child is used to select the element based on their source order. Each section is applied with the linear gradient as the background image. The gradient is created by defining at least two color stops, which render a ooth transition. It is also possible to set a starting point and an angle along with the gradient effect.

section div{
    min-height:100px;
    margin-bottom:20px;
}
section div:nth-child(1){
    background-color: rgba(0,0,0,0.85);
    background-image: -webkit-linear-gradient(left,rgba(153,93,179,0.6),rgba(44,155,219,0.6));
    background-image: -moz-linear-gradient(left,rgba(153,93,179,0.6),rgba(44,155,219,0.6));
    background-image: -o-linear-gradient(left,rgba(153,93,179,0.6),rgba(44,155,219,0.6));
    background-image: linear-gradient(to right,rgba(153,93,179,0.6),rgba(44,155,219,0.6));
}
section div:nth-child(2){
        background: rgb(255,174,39);
    background: -moz-linear-gradient(-45deg, rgba(255,174,39,1) 0%, rgba(222,73,109,1) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,174,39,1)), color-stop(100%,rgba(222,73,109,1)));
    background: -webkit-linear-gradient(-45deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%);
    background: linear-gradient(135deg, rgba(255,174,39,1) 0%,rgba(222,73,109,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffae27', endColorstr='#de496d',GradientType=1 );
}
section div:nth-child(3){
background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
}
section div:nth-child(4){
background-color: #159957;
    background-image: linear-gradient(120deg, #155799, #159957)
}
section div:nth-child(5){
    background: #25a1c3;
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,#25a1c3 0,#64bc5b 100%);
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#25a1c3),color-stop(100%,#64bc5b));
    background: -webkit-linear-gradient(left,#25a1c3 0,#64bc5b 100%);
    background: -o-linear-gradient(left,#25a1c3 0,#64bc5b 100%);
    background: -ms-linear-gradient(left,#25a1c3 0,#64bc5b 100%);
    background: linear-gradient(to right,#25a1c3 0,#64bc5b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#25a1c3',endColorstr='#64bc5b',GradientType=1);
}
section div:nth-child(6){
    background-image: -o-linear-gradient(right bottom, #d4fbad 0%, #58f9e9 100%);
    background-image: -moz-linear-gradient(right bottom, #d4fbad 0%, #58f9e9 100%);
    background-image: -webkit-linear-gradient(right bottom, #d4fbad 0%, #58f9e9 100%);
    background-image: -ms-linear-gradient(right bottom, #d4fbad 0%, #58f9e9 100%);
    background-image: linear-gradient(to right bottom, #d4fbad 0%, #58f9e9 100%);
}
section div:nth-child(7){
    background: -webkit-linear-gradient(left, rgba(152, 211, 97, 0.9) 10%, rgba(86, 180, 211, 0.9) 90%);
    background: -moz-linear-gradient(left, rgba(152, 211, 97, 0.9) 10%, rgba(86, 180, 211, 0.9) 90%);
    background: -ms-linear-gradient(left, rgba(152, 211, 97, 0.9) 10%, rgba(86, 180, 211, 0.9) 90%);
    background: -o-linear-gradient(left, rgba(152, 211, 97, 0.9) 10%, rgba(86, 180, 211, 0.9) 90%);
    background: linear-gradient(left, rgba(152, 211, 97, 0.9) 10%, rgba(86, 180, 211, 0.9) 90%);
}
section div:nth-child(8){
    background: -webkit-linear-gradient(60deg, #556270 10%, #FF6B6B 90%);
    background: -moz-linear-gradient(60deg, #556270 10%, #FF6B6B 90%);
    background: -ms-linear-gradient(60deg, #556270 10%, #FF6B6B 90%);
    background: -o-linear-gradient(60deg, #556270 10%, #FF6B6B 90%);
    background: linear-gradient(60deg, #556270 10%, #FF6B6B 90%);
}
section div:nth-child(9){
    background: -moz-linear-gradient(left,#3a88f4 0%,#7854ae 50%,#cb2f70 100%);
    background: -webkit-gradient(linear,left top,right top,color-stop(0%,#3a88f4),color-stop(50%,#7854ae),color-stop(100%,#cb2f70));
    background: -webkit-linear-gradient(left,#3a88f4 0%,#7854ae 50%,#cb2f70 100%);
    background: -o-linear-gradient(left,#3a88f4 0%,#7854ae 50%,#cb2f70 100%);
    background: -ms-linear-gradient(left,#3a88f4 0%,#7854ae 50%,#cb2f70 100%);
    background: linear-gradient(to right,#3a88f4 0%,#7854ae 50%,#cb2f70 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a88f4',endColorstr='#cb2f70',GradientType=1 );
}
section div:nth-child(10){
    background: #ff7c00;
    background: -moz-linear-gradient(-45deg,#ff7c00 0,#2a0a59 100%);
    background: -webkit-gradient(left top,right bottom,color-stop(0%,#ff7c00),color-stop(100%,#2a0a59));
    background: -webkit-linear-gradient(-45deg,#ff7c00 0,#2a0a59 100%);
    background: -o-linear-gradient(-45deg,#ff7c00 0,#2a0a59 100%);
    background: -ms-linear-gradient(-45deg,#ff7c00 0,#2a0a59 100%);
    background: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff7c00 0,endColorstr=#2a0a59 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7c00',endColorstr='#2a0a59',GradientType=1);
}
section div:nth-child(11){
    background: -webkit-linear-gradient(35deg,#4E75B9 29%,#5CBF98 90%);
    background: -moz-linear-gradient(35deg,#4E75B9 29%,#5CBF98 90%);
    background: -o-linear-gradient(35deg,#4E75B9 29%,#5CBF98 90%);
    background: linear-gradient(35deg,#4E75B9 29%,#5CBF98 90%);
}
section div:nth-child(12){
    background: -webkit-linear-gradient(45deg,#BBFFD0 29%,#5CBF98 90%);
    background: -moz-linear-gradient(45deg,#BBFFD0 29%,#5CBF98 90%);
    background: -o-linear-gradient(45deg,#BBFFD0 29%,#5CBF98 90%);
    background: linear-gradient(45deg,#BBFFD0 29%,#5CBF98 90%);
}
section div:nth-child(13){
    background: -webkit-linear-gradient(35deg,#BBFFD0 29%,#ECFEA8 90%);
    background: -moz-linear-gradient(35deg,#BBFFD0 29%,#ECFEA8 90%);
    background: -o-linear-gradient(35deg,#BBFFD0 29%,#ECFEA8 90%);
    background: linear-gradient(45deg,#BBFFD0 29%,#ECFEA8 90%);
}

This is a real fun using trending gradients to allure the client base. Start incorporating in your designs.

Gradients Background Colors

Leave a Reply Cancel reply