LeaVerou

/** 
 * First example 
 */

background: linear-gradient(left, white 20%, #8b0 80%);
height: 100%;

LeaVerou

/** 
 * Second example, stops starting to get closer
 */

background: linear-gradient(left, white 30%, #8b0 70%);
height: 100%;

LeaVerou

/** 
 * Third example, stops getting even closer
 */

background: linear-gradient(left, white 40%, #8b0 60%);
height: 100%;

LeaVerou

/** 
 * Fourth example, stops at the same position
 */

background: linear-gradient(left, white 50%, #8b0 50%);
height: 100%;

LeaVerou

/** 
 * Fifth example, colors meeting at different position
 */

background: linear-gradient(left, white 30%, #8b0 30%);
height: 100%;

LeaVerou

/** 
 * First example 
 */

background: linear-gradient(left, deeppink 30%, gold 30%);
height: 100%;

LeaVerou

/** 
 * Sixth example, colors meeting at different position
 */

background: linear-gradient(left, white 90%, #8b0 90%);
height: 100%;

LeaVerou

/** 
 * Vertical stripes
 */

background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;

LeaVerou

/** 
 * First attempt to make diagonal stripes
 */

background: linear-gradient(45deg, white 50%, #8b0 50%);
background-size: 100px 100px;

LeaVerou

/** 
 * Diagonal stripes
 */

background: linear-gradient(45deg, white 25%, #8b0 25%, #8b0 50%, white 50%, white 75%, #8b0 75%, #8b0);
background-size:100px 100px;