同じ位置に2つの色の停止を置くと、境界がくっきり分かれます。縞模様・進捗バー・円グラフも、画像を使わずに1枚の背景で描けます。

縞模様の #334155 0 24px の「0」は、直前の停止位置（12px）と同じ扱いになります。位置を毎回書き足さずに済むので、色を増やしても計算が要りません。