{clear} THUMBNAIL_BEGIN #image: gradient-with-css3.jpg; #description: What is gradient? Gradient is a fill type when you have one color gradually turning into another.

To implement gradient, it is necessary to specify color and opacity of certain key points, as well as color and transparency of the remaining points that are calculated according to certain mathematical algorithms. THUMBNAIL_END {/clear}

What is gradient? Gradient is a fill type when you have one color gradually turning into another.

To implement gradient, it is necessary to specify color and opacity of certain key points, as well as color and transparency of the remaining points that are calculated according to certain mathematical algorithms.


Gradient with the help of “CSS+image”

Gradient background can be found on various websites, and it is probably the most popular web design method. It adds 3D form to web design, and website becomes a lot more attractive.

We can see light gradient in the main menu on www.apple.com

We can see light gradient in the main menu on www.apple.com

Most commonly “CSS + image” is used for layout. This effect has already become a norm; and usually, it is carried out in this way:

div { background: url(picture.png) repeat-x #ссс; }

This method has a wide range of disadvantages. As you can see from the code, the image has to be overlaid on the background, but that is not the thing we really want to do.

When an image has small elements, it will also be small; but having gradient overlaid on the whole website background will cause noticeable changes. Besides, uploading multiple resources has bad influence on the website.


Gradient implementation with the help of CSS3

The long-waited function (gradient background) has been added into CSS3 (Cascading Style Sheets); and thanks to this feature gradient creation on the block became possible.

Parameters list of CSS attribute of linear-gradient()

Linear gradient.
.gradient{ linear-gradient( “bg-position”, “angle”, “colors” ); }
  • bg-position” parameter sets gradient beginning in the block (“Top 0px left 0px” by default).
.gradient{ linear-gradient( right top, yellow, blue ); }
.gradient{ linear-gradient( left 20px top 30px, yellow, blue ); }
.gradient{ linear-gradient( -10px 20px, yellow, blue ); }
  • angle” parameter sets gradient spreading angle (“0 deg” by default).
.gradient{ linear-gradient(right top, 30deg, yellow, blue); }
.gradient{ linear-gradient( 45deg, yellow, blue );}
  • colors” parameter sets gradient key points colors. It is the mandatory parameter which includes no less than two colors.
.gradient{ linear-gradient( right top, 30deg, yellow, blue ); }
.gradient{ linear-gradient( right top, 30deg, yellow 10%, #0f0 ); } 
.gradient{ linear-gradient( right top, 30deg, yellow, blue ); }
.gradient{ linear-gradient( right top, 30deg, yellow 10%, #0f0 ); }
.gradient{ linear-gradient( yellow, blue 30px ); }
.gradient{ linear-gradient( yellow 10px, blue 20%, #0f0 ); }

Parameters list of CSS property of radial-gradient ()

Radial gradient.
.gradient{ radial-gradient( "bg-position", "angle", "shape", "size", "colors" ); }
  • bg-position” parameter sets gradient central position in the block (“center” “center” by default).
.gradient{ radial-gradient( right top, yellow, blue ); }
.gradient{ radial-gradient( left 20px top 30px, yellow, blue ); }
.gradient{ linear-gradient( -10px 20px, yellow, blue ); }
  • angle” parameter sets gradient spreading angle (“0 deg” by default).
.gradient{ radial-gradient( right top, 30deg, yellow, blue ); }
.gradient{ radial-gradient( 45deg, ellipse, yellow, blue ); }
  • shape” parameter sets gradient form. Values: “circle”, “ellipse”. (“circle” by default).
.gradient{ radial-gradient( circle, yellow, blue ); }
.gradient{ radial-gradient( right top, 30deg, ellipse, yellow 10%, #0f0 ); }
  • size” parameter sets gradient alignment regarding to angles and sides of the block. It can be defined by the following parameters: “closest-side”, “closest-corner”, “farthest-side”, “farthest-corner”, contain (synonym is closest-side), cover (synonym is farthest-corner).
.gradient{ radial-gradient( bottom left, farthest-side, red, yellow 50px, green ); }
.gradient{ radial-gradient( 20px 30px, contain, red, yellow, green ) }

At first sight everything looks perfect, but there is only one “but”. The truth is that CSS3 is not supported by all the browsers yet.


Browser support

CSS3 gradient and Mozilla Firefox

Firefox 3.6. was released on January 21st, 2010. It supports linear –moz-linear-gradient() and radial -moz-radial-gradient() CSS3 gradients.

With their help both simple two-colored gradients and multicolor gradients can be created; and repeated gradient can also be created.

.gradient { background: -moz-linear-gradient( top, #0066FF, #83CA54 ); }
.gradient { background: -moz-repeating-linear-gradient( top left -45deg, red, red 5px, white 5px,       
                 white 10px ); }
.gradient { background-image: -moz-radial-gradient( center 45deg, circle closest-side, 
                 orange 0%, red 100% ); }

FF versions lower than 3.6 do not support CSS3 “linear-gradient” and “radial-gradient” functions!

CSS3 gradient in Chrome and Safari

Starting from 4.0 version Safari (and 2.0 version for Chrome) supports -webkit-gradient() command for linear and radial gradients creating.

.gradient{ background: -webkit-gradient( linear, left top, left bottom, from( rgb( 0, 102, 255 ) ), 
                to( rgb( 131, 202, 84 ) ) ) }

The latest Chrome versions use the same syntax for gradient, as Firefox does.

.gradient{ background: -webkit-linear-gradient( top, #0066FF, #83CA54 ); }
.gradient{ background: -webkit-repeating-linear-gradient( top left -45deg, red, red 5px, white 5px, 
               white 10px ); }
.gradient{ background-image: -webkit-radial-gradient( center 45deg, circle closest-side, orange 0%, 
               red 100% ); }

Besides, there is possibility of setting radial repeated gradient.

.gradient{ background-image: -webkit-radial-gradient( center 45deg, circle closest-side, orange, red 10%, 
               orange 30% ); }

CSS3 gradient and Internet Explorer

Filters are used for gradients creating in IE. Starting from IE 5.5 version you can create gradient with the help of that filter.

.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr=#FF0066FF, 
              endColorstr=#FF83CA54 ); }

This non-recurrent gradient may have two directions:

  • Horizontal: GradientType = 1
  • Vertical: GradientType = 0

For Internet Explorer 8.0 you can write the individual filter.

.gradient{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType=0,                 
              startColorstr=#FF0066FF, endColorstr=#FF83CA54 )"; }

But the old entry can also be read by IE8.

CSS3 gradient and Opera

Starting from 9.5 version Opera provides gradient creating possibility using SVG as a background. Starting from 11.1 version Opera supports vendor value property for “background-o-linear-gradient” and “-o-repeating-linear-gradient”.

.gradient{ background: -o-linear-gradient( top, #0066FF, #83CA54 ); }
.gradient{ background: -o-repeating-linear-gradient( top left -45deg, red, red 5px, white 5px, white 10px); }

And what about the old versions of browsers?

The oldest versions of browsers will just ignore gradient-fill handling, thus, at first, the background color should be set before gradient description.


Divine Elemente PSD to WordPress

Convert graphics from Adobe Photoshop to a working WordPress theme. No coding.


  • Hassan Raza
    That was really helpful. Creating Gradient from Photoshop and then using as a background is one hectic work; also i guess using image as gradient will increase the loading time of website. But the above method is clean and efficient.