html - Increase the white part of the gradient -


in site header have gradient background shown in below image.

enter image description here

i used below code create gradient.

code css:

.top-switch-bg {    background: -webkit-linear-gradient(left, white, #d9d9d9);  /* safari 5.1 6.0 */    background: -o-linear-gradient(right, white, #d9d9d9);  /* opera 11.1 12.0 */    background: -moz-linear-gradient(right, white, #d9d9d9);  /* firefox 3.6 15 */    background: linear-gradient(to right, white-space, #d9d9d9);  /* standard syntax */    min-height: 29px;    position: relative;    z-index: 10030;    z-index: 1;  }
<div class="top-switch-bg"></div>

can tell me please how add more white on left? looks good.

to have more white on left side, increase color stop point white color below. higher percentage, larger area occupied white color.

background: linear-gradient(to right, white 20% , #d9d9d9); 

currently, background gradient starts move white color #d9d9d9 @ 0% itself. when 20% (color stop point) specified next color, gradient take solid white color till 20% of background size , gradient white #d9d9d9 rest 80%.

note: have replaced #d9d9d9 red in below snippet make effect more visible.

.top-switch-bg {    background: -webkit-linear-gradient(left, white 20%, red);  /* safari 5.1 6.0 */    background: -o-linear-gradient(right, white 20%, red);  /* opera 11.1 12.0 */    background: -moz-linear-gradient(right, white 20%, red);  /* firefox 3.6 15 */    background: linear-gradient(to right, white 20%, red);  /* standard syntax */    min-height: 29px;    position: relative;    z-index: 1;  }    /* demo*/  body {    background: black;  }
<div class="top-switch-bg"></div>


Comments