How to Make a Colox Box with Gradient Effect

Indeed many people are looking for how the blog looks neat and interesting, Keep in mind thisvery good if installed on your blog. So that readers do not look bored looking at the textwriting on your blog.

How to Install Gradient Color Note Box i Blogger.

1. Go to Blogger
2. Choose Template> Edit HTML, Search for code ]]></b:skin>
3. Place the code below the place above the code

 /* Material Color Box */
.warna{
   overflow:hidden;
   position:relative;
   margin:.5rem 0 1rem;
   transition:box-shadow .25s;
   border-radius:2px;
   color:#fff;
   box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   padding:20px;
   font-size:14px
}
.warna.gradient1{
   background: linear-gradient(-45deg, #eded50, #ed5084, #131735, #ce063e);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}
.warna.gradient2{
   background: linear-gradient(-45deg, #d5d6e5, #131a99, #39ced6, #211f1d);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}
.warna.gradient3{
   background: linear-gradient(-45deg, #eded0b, #ed530b, #382670, #3f3639);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}
.warna.gradient4{
   background: linear-gradient(-45deg, #EE7752, #E73C7E, #e2dcde, #a80f42);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
}
.warna.gradient5{
    background: linear-gradient(-45deg, #EE7752, #3ebcad, #1a0f3d, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}
} 

4. Click Save
5. Then click on the post and then a new entry select HTML , then copy the code below.

<div class="warna gradient1"> ini adalah warna nya </div>
<div class="warna gradient2"> ini adalah warna nya </div>
<div class="warna gradient3"> ini adalah warna nya </div>
<div class="warna gradient4"> ini adalah warna nya </div>
<div class="warna gradient5"> ini adalah warna nya </div>

6. Press Publish and this would be the result

ini adalah warna nya

ini adalah warna nya

ini adalah warna nya

ini adalah warna nya

ini adalah warna nya

ORIGINAL CODE