Mit CSS3 gibt es die Möglichkeit, Verläufe ganz ohne Hilfe von Bildern zu generieren, was der Performance sowie dem HTML Code zu gute kommt.
Und das beste ist, mit dem Internet Explorer 10 soll dieser dies auch ohne die filter Funktion sauber unterstützen.

Das Zauberwort ist background-image: gradient(), welches schon 2008 im Webkit eingeführt wurde.
Für die verschiedenen Browser ist es aber bis heute noch nötig, die einzelnen Prefix (-webkit, -moz, -ms, -o)  vor dem Gradient zu setzen.

Ein einfaches Beispiel für ein Verlauf könnte so aussehen:
<div style="
background-image: -webkit-linear-gradient(#ffffff 0%, #DC3490 100%);
background-image: -moz-linear-gradient(#ffffff 0%, #DC3490 100%);
background-image: -o-linear-gradient(#ffffff 0%, #DC3490 100%);
background-image: linear-gradient(#ffffff 0%, #DC3490 100%);">
</div>
Für den Explorer bis Version 9 wird der Filter benötigt, um einen Verlauf darstellen zu können:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#DC3490');

Beeinflussung des Verlaufs
Ein Verlauf (Gradient) ist eine gedachte Linie, auf der Farbunterbrechungen (Color Stops) liegen, welche Horizontal, Vertical sowie Schräg verlaufen. Die einfache Variante ist wie im ersten Beispiel beschrieben eine Farbunterbrechung in zwei Teilen. An jedem Color Stop (Die Prozentzahl im oberen Beispiel) beginnt eine Farbe, die bis zum nächsten Color Stop in die andere Farbe verläuft.

Bleiben wir bei unserem oberen Beispiel und schauen uns eine Zeile genauer an:
background-image: -webkit-linear-gradient(left #ffffff 0%, #DC3490 100%);

Für die Positionierung, von wo die erste Farbe beginnen soll, gibt es drei Möglichkeiten

• left definiert die Position und beginnt von links nach rechts
• top beginnt von oben nach unten
• 45deg von links unten nach rechts oben

Für die Farben sowie die Farbpositionen genannt Colorstop sind zwei Angaben wichtig, die Farbe selbst, welche als RGB-, HSL-, Hexwerte oder als Farbnamen angegeben werden kann sowie der Colorstop, der in Prozent oder Pixeln angegeben werden kann.

In unserem Beispiel beginnen wir von links und haben benutzen eine Verteilung von 40% zu 60%.

Mehrere Farbverläufe
Mit dieser Variante ist es möglich auch mehr als 2 Farbverläufe in einer Box zu machen.
Wichtig dabei ist, es wird mit der kleinsten Zahl als Colorstop begonnen und sie sollte dann weiter steigen, um ein gewünschtes Ergebnis zu erzielen.
So z.B:
background-image: -webkit-linear-gradient(top left #ffffff 0%, #DC3490 30%, red 60%, green 90%);

Ein Kreis und eine Ellipse
Nicht nur gerade Verläufe sind möglich, auch ein Kreis oder eine Ellipse kann als Verlauf dargestellt werden.

Mit den Anpassungen der Positionen und Angaben, ist dies leicht umzusetzen:
background-image: -webkit-linear-gradient(center, circle farthest-corner #ffffff 0%, #DC3490 30%, red 60%, green 90%);
An den Colorstops ändert sich nichts.
Soll statt eines Kreises eine Ellipse angezeigt werden, dann wird circle farthest-corner in ellipse closest-side getauscht.

Für alle Darstellungen der Browser muss dies jeweils in den einzelnen Prefix wie oben angegeben einzeln dargestellt werden.