Css3 Tutorial

CSS3 Gradient Effects for Different Browsers

First see vendor specific prefixes:

  • -moz- (Mozilla Firefox, Mozilla Thunderbird, Mozilla SeaMonkey, Mozilla Camino)
  • -webkit- (Google Chrome, Apple Safari)
  • -o- (Opera)
  • -ms- (Microsoft Internet Explorer 9.0+)
  • -khtml- (Konqueror)

Different Gradients Effects

  • linear-gradient
  • radial-gradient

Linear Gradient


.gradient-bg {
background-color: #DD4422;
background-image: -moz-linear-gradient(top left, #FF8800 0%, #DD4422 100%);/* Mozilla Firefox */
background-image: -o-linear-gradient(top left, #FF8800 0%, #DD4422 100%);/* Opera */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FF8800), color-stop(1, #DD4422));/* Webkit (Safari/Chrome 10) */
background-image: -webkit-linear-gradient(top left, #FF8800 0%, #DD4422 100%);/* Webkit (Chrome 11+) */
background-image: -ms-linear-gradient(top left, #FF8800 0%, #DD4422 100%);/* IE10 */
background-image: linear-gradient(top left, #FF8800 0%, #DD4422 100%);/* Proposed W3C Markup */


<div style="margin: 0 auto; width: 1080px;">
<div>This Element has linear gradient effect without any background image. This reduces http requests to servers.</div>
  1. […] to use of gradient effects for your web design instead of illustrated image like (png, jpg, etc). Read more… Advertisement GA_googleAddAttr("AdOpt", "1"); GA_googleAddAttr("Origin", "other"); […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s