Striped background - hard edges instead of blurred

Question

I'm trying to create a striped background for a page. Ideally the stripes need to have solid edges, however when I attempt this the edges are all slightly blurry. Am I missing something here?

.timeline {
width: 100%;
height: 1800px;
background-size: 1800px 1800px;
background-image: linear-gradient(0deg, #dbe4ea 25%, #f6f6f6 25%, #f6f6f6 50%, #dbe4ea 50%, #dbe4ea 75%, #f6f6f6 75%, #f6f6f6 100%);
}

<div class="timeline"></div>

Is related to https://stackoverflow.com/questions/26652661/blurry-linear-gradient-stops-in-chrome ? — Fabrizio Calderan, Oct 30 '18 at 13:03
Try this : background: repeating-linear-gradient(0deg,#dbe4ea 0%,#dbe4ea 20%,#f6f6f6 20%,#f6f6f6 40%); — vssadineni, Oct 30 '18 at 14:11

score 0 · Answer 1 · answered Oct 30 '18 at 13:28

.timeline {
width: 100%;
height: 1800px;
background: repeating-linear-gradient( 
        0deg,
        #dbe4ea,
        #dbe4ea 100px,
        #f6f6f6 100px,
        #f6f6f6 200px);
}

<div class="timeline"></div>

Hopefully this helps. I figured out why it was going blurry. It's because you have that 75% in there. At least when I was trouble shooting that is what happened for me.

Striped background - hard edges instead of blurred

1 Answers1