das mit dem Treppeneffekt liegt vermtlich an der Konvertirung ins GIF-Format, die du sicherlich vorgenommen hast, um deine Grafik mittels Transparenz auf einem Hintergrund darzustellen.
Das Problem bei GIF ist, dass es keine Transparenzabstufungen zum Hintergrund kennt. GIF kennt demnach nur 100% Farbe, oder 100% Transparenz für jedes Pixel des Bildes. Als Lösung bieten viele Grafikprogramme ein Dithering an, welches, je nach Grad, benachbarte Pixel jeweils abwechselnd in Farbe bzw. Transparenz darstellt und somit einen Verlauf versuchen. Meist sieht dies jedoch eher bescheiden aus.
Eine andere Ursache wäre, dass das GIF-Format mit einer indizierten Farbtabelle arbeitet und dort auch nur max. 255 Farben unterstützt. Bei Farbverläufen werden allerdings oft mehr Farben benötigt für einen weichen Übergang. Dadurch könnte besagter Treppeneffekt entstehen.
Eine Lösung wäre nun das Bild als JPEG zu speichern, falls du auf die Transparenz mit dem Hintergrund verzichten kannst. Notfalls kannst du deine Kugel auch im Photoshop mit dem Hintergrund kombinieren und es irgendwie so versuchen in die Webseite zu “basteln”.
Benötigst du unbedingt die Transparenz zum Hintergrund, so kannst du noch das PNG-Format ausprobieren, welches allerdings noch nicht ganz fehlerfrei von allen Browsern unterstützt wird (im Bezug auf Transparenz vor allem).

Viel Erfolg,
micha.