wagnerdelima wagnerdelima - 3 months ago 40
CSS Question

Linear-gradient to produce dashed lines

I have a linear gradient in my page and it's Dashed line

enter image description here

Actually, it is suppose to be a solid line, not dashed. This is the code for it:

background: -webkit-linear-gradient( left top, #ffe1d9 50%, #989cdb 50%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #ffe1d9 50%, #989cdb 50%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #ffe1d9 50%, #989cdb 50%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom left, #ffe1d9 50%, #989cdb 50%); /* Standard syntax */


Anyone would know how to produce a solid linear gradient? Thank you!

Answer

Apparently, the browser thinks that it doesn't have to do any anti-aliasing for this gradient, since there is a sharp cutoff point between the colors. So, no gradient effect!
(The effect isn't the same in all browsers, by the way; Chrome seems to suffer the most.)

Solution: don't use 50% for both color breaks, but leave just the smallest amount between them, to create a actual gradient from color to color. Half a percent will do.

.lines {
  height: 4em;
  
  background: -webkit-linear-gradient(left top, #ffe1d9 49.75%, #989cdb 50.25%);
  background: -moz-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%);
  background: -o-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%);
  background: linear-gradient(to bottom left, #ffe1d9 49.75%, #989cdb 50.25%);
}
<div class="lines"></div>

For comparison, here is the original with 50% each.

.lines {
  height: 4em;
  
  background: -webkit-linear-gradient(left top, #ffe1d9 50%, #989cdb 50%);
  background: -moz-linear-gradient(bottom right, #ffe1d9 50%, #989cdb 50%);
  background: -o-linear-gradient(bottom right, #ffe1d9 50%, #989cdb 50%);
  background: linear-gradient(to bottom left, #ffe1d9 50%, #989cdb 50%);
}
<div class="lines"></div>