Durch harte Uebergaenge zwischen den Farben eines Verlaufs erzeugt CSS Formen wie Dreiecke (Kreise gibt es mit Hilfe von border-radius).

#grad1, #grad2 { position: absolute; width: 140px; height:140px }
#grad1 {left: 140px; background-image: linear-gradient(45deg, #A4C67D 50%, white 50%)}
#grad2 {left: 0px; background-image: linear-gradient(135deg, white 50%, #A4C67D 50%)}

-----------------------------------------------------------------------------------------------------------------------

Hintergrundmuster mit CSS-Verlaeufen

Mit Gradient und background-size entsteht ein einfaches Hintergrundmuster.

background-image: linear-gradient(
   45deg, 
   #A4C67D 50%, 
   wheat 50%

background-size:20px 20px;

-----------------------------------------------------------------------------------------------------------------------

Streifen sind kein Problem

background-image: linear-gradient(
   45deg, 
   wheat 25%, gray 25%, 
   gray 50%, wheat 50%, 
   wheat 75%, gray 75%, 
   gray

background-size: 50px 50px;

-----------------------------------------------------------------------------------------------------------------------

Zickzackmuster

background: 
linear-gradient(135deg, wheat 25%, transparent 25% ) -12px 0,
linear-gradient(225deg, wheat 25%, transparent 25% ) -12px 0,
linear-gradient(315deg, wheat 25%, transparent 25% ),
linear-gradient(45deg, wheat 25%, transparent 25% );
background-size:24px 24px; background-color: gray;

background-size: 50px 50px;

-----------------------------------------------------------------------------------------------------------------------

Gradient mit Multi-Color-Verlauf

Verlaeufe verarbeiten auch mehr als nur zwei Color Stops.

background-image: 
linear-gradient (left, purple, blue, green, yellow, red, purple);

-----------------------------------------------------------------------------------------------------------------------

Radialer Verlauf

background: radial-gradient(
   center, 
   circle farthest-corner, 
   yellow 0%, 
   blue 25%, 
   white 75%


background: radial-gradient(
   center, 
   ellipse closest-side, 
   yellow 0%, 
   blue 25%, 
   white 75%