Unscharfe Kanten auf linearem Farbverlauf

Question

Das untenstehende CSS macht genau das, was ich will (erzeugt einen einzelnen Streifen auf einem Hintergrund), außer dass die Kanten leicht unscharf sind. Ich brauche eine saubere Kante (hart) zwischen Weiß und Braun. Irgendwelche Ideen?

background: linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px, rgba(175, 156, 114, 0.4) 499px, white 500px); 

Auch ziemlich positiv es möglich ist, weil diese CSS eine saubere Kante schafft, aber dann geht die Bräune auf ewig:

background: linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px); 

Answer 1

Sie zwei einfache verwenden können (1 Haltestelle) linearen Gradienten - der Boden eine weiß und braun und die obere transparent und weiß.

body { 
 
    background: linear-gradient(to right, transparent 500px, white 500px), 
 
       linear-gradient(to right, white 300px, rgba(175, 156, 114, 0.4) 300px); 
 
}