타이틀은 모바일 웹사이트 개발이지만 html5와 css3의 기술이기 때문에 사파리 브라우저에서 사용 가능한 기술입니다.

css3에서 지원하는 기능 중 하나인 그라디언트 처리입니다.

.gradients{
 width: 100px;
 height: 100px;
 border: 1px solid #666666;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #e70057),
                color-stop(0.5, orange), color-stop(1.0, #006de7));
}

위 스타일을 이용하면 아래와 같은 결과물이 나옵니다.

 [출처] http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html#//apple_ref/doc/uid/TP40008032-CH7-SW11