CODEWITHSUNDEEP
htmlcsslinear-gradients
cristi
cristi

Reputation: 23

Increase the white part of the gradient

In my site header I have a gradient background like shown in the below image.

enter image description here

I used the below code to create this gradient.

CODE CSS:

.top-switch-bg {
  background: -webkit-linear-gradient(left, white, #d9d9d9);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, white, #d9d9d9);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, white, #d9d9d9);  /* For Firefox 3.6 to 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 you tell me please how do I add more white on the left? So that it looks good.

Upvotes: 1

Views: 76

Answers (2)

Harry
Harry

Reputation: 89760

To have more white on the left side, just increase the color stop point for white color to something like the below. The higher the percentage, the larger the area occupied by white color.

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

Currently, your background gradient starts to move from white color to #d9d9d9 at 0% itself. When the 20% (color stop point) is specified next to a color, the gradient would take a solid white color till 20% of the background size and then a gradient from white to #d9d9d9 for the rest 80%.

Note: I have replaced #d9d9d9 with red in the below snippet to make the effect more visible.

.top-switch-bg {
  background: -webkit-linear-gradient(left, white 20%, red);  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, white 20%, red);  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, white 20%, red);  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, white 20%, red);  /* Standard syntax */
  min-height: 29px;
  position: relative;
  z-index: 1;
}

/* Just for demo*/
body {
  background: black;
}
<div class="top-switch-bg"></div>

Upvotes: 1

Cheslab
Cheslab

Reputation: 1924

I believe your problem is not in the gradient but in that "Altra Dona" image. If you can manage to make it's background transparent (delete background in photoshop and save as .png file for example) your page will look perfectly fine.

If you still want to change the gradient itself, try this one:

.top-switch-bg{
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left,  #ffffff 1%, #ffffff 30%, #d9d9d9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ffffff), color-stop(30%,#ffffff), color-stop(100%,#d9d9d9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #ffffff 1%,#ffffff 30%,#d9d9d9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #ffffff 1%,#ffffff 30%,#d9d9d9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #ffffff 1%,#ffffff 30%,#d9d9d9 100%); /* IE10+ */
    background: linear-gradient(to right,  #ffffff 1%,#ffffff 30%,#d9d9d9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d9d9d9',GradientType=1 ); /* IE6-9 */
}

Remember, this type of gradients (multi-stop gradients) does not work in IE 9 or lower, so I highly recommend to fix the image.

By the way, what's the point to use z-index twice? You can painlessly get rid of the first one because it will be overridden by the last one anyway.

Also you may be interested in CSS gradient generator - http://www.colorzilla.com/gradient-editor/ It is really handy tool for making gradients any complexity.

Upvotes: 0

Related Questions