CODEWITHSUNDEEP
htmlcsscross-browserlinear-gradients
Marco
Marco

Reputation: 3641

Remove border color from linear gradient

I've a problem removing a (border) color from a overlapping linear gradient. In IE 11 it workes as expected. In Firefox there is a small visible grey line between the gradients. How can I remove this?

arrow shows the problem

I tried it this way:

.box2 {
  background-image: -webkit-linear-gradient(154deg, red 67%, transparent 33%), -webkit-linear-gradient(26deg, transparent 67%, red 33%);
  background-image: -moz-linear-gradient(154deg, red 67%, transparent 33%), -moz-linear-gradient(26deg, transparent 67%, red 33%);
  background-image: -ms-linear-gradient(154deg, red 67%, transparent 33%), -ms-linear-gradient(26deg, transparent 67%, red 33%);
  background-image: -o-linear-gradient(154deg, red 67%, transparent 33%), -o-linear-gradient(26deg, transparent 67%, red 33%);
  background-image: linear-gradient(154deg, red 67%, transparent 33%), linear-gradient(26deg, transparent 67%, red 33%);
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 80% 100%;
  height: 100px;
  width: 100%;
  border: 0;
}

Here's a fiddle: https://jsfiddle.net/aam6roaf/

Upvotes: 2

Views: 3661

Answers (1)

Harry
Harry

Reputation: 89750

I can see the very same issue in Firefox v45.0.2 or Windows 10. While I have no idea why that line is appearing, it goes away when I set the color-stop points like in the below snippet. Setting color stops like in the below snippet also has the advantage of producing smoother angled gradients.

This works well in Firefox v45.0.2, Chrome(v51.0.2704.19 dev-m), Opera v36, IE11 and Edge.

.box2 {
  background-image: linear-gradient(154deg, red 67%, transparent 67.25%), linear-gradient(26deg, transparent 67%, red 67.25%);
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 80% 100%;
  height: 100px;
  width: 100%;
  border: 0;
}
<div class="box2"></div>

Upvotes: 1

Related Questions