How to make color section gradient background.

there are a lot of good grandient online creators:
http://angrytools.com/gradient/
realy madness:
http://elrumordelaluz.github.io/draGGradients/

i generated the code from above ( don’t know if you would recognize the .14% etc ):

see here your test-page: https://webers-testseite.de/crunchybuzz/
i give to the color-section the class: gradient-section
and to the button: gradient-button

here is my quick css code:

.gradient-section, .gradient-button a {
background-color: #8E9EAB !important;
background: -moz-linear-gradient(279deg, #8E9EAB 0%, #8E9EAB 14%, #ffffff 54%, #C9D1D7 85%, #C9D1D7 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8E9EAB), color-stop(14%, #8E9EAB), color-stop(54%, #ffffff), color-stop(85%, #C9D1D7), color-stop(100%, #C9D1D7)); /* safari4+,chrome */
background: -webkit-linear-gradient(279deg, #8E9EAB 0%, #8E9EAB 14%, #ffffff 54%, #C9D1D7 85%, #C9D1D7 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(279deg, #8E9EAB 0%, #8E9EAB 14%, #ffffff 54%, #C9D1D7 85%, #C9D1D7 100%); /* opera 11.10+ */
background: -ms-linear-gradient(279deg, #8E9EAB 0%, #8E9EAB 14%, #ffffff 54%, #C9D1D7 85%, #C9D1D7 100%); /* ie10+ */
background: linear-gradient(171deg, #8E9EAB 0%, #8E9EAB 14%, #ffffff 54%, #C9D1D7 85%, #C9D1D7 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8E9EAB', endColorstr='#C9D1D7',GradientType=0 ); /* ie6-9 */ 
}
.gradient-button a {
color: #333 !important;
box-shadow: 4px 4px 8px #333;
border: none !important;
}

last rule is just to see the button on same gradient clearly. – border: none seems to be important when overlaying with a gradient –
or take the same color: #8e9eab

something new to me too:
the angle is different to the -webkit, moz-, o- etc ? Strange thing

Note: Multiple browsers implement (with prefix) an older draft of the specification where 0deg points right instead of up. Therefore, the value of the angle should be taken into account when using the standardized linear gradient and the mixed one with prefix.

most of those entries aren’t needed if you can ignore old ie6-9 ; opera and moz will not be necessary on the new versions

PPS: a lot of beginners put in that custom-class field the phrase with the dot ( .firstcolorblock) but this is wrong.
in that field only the class name was inserted. I’m not saying it happened to you, but it’s been here before.