Skip to content

January 10, 2013

Creating 3 Stage Pure CSS3 Gradients

With the ever growing popularity and ease of use of CSS3, it is important to use all of the benefits available from the technology. One of those benefits is being able to create gradients without the need for any images. This can be beneficial in 2 ways, one it means the gradient can be changed easily without having to make a new image, and two it eliminates the request for an image which helps in saving bandwidth.


Creating CSS3 gradient is easier than you expect and can take just one line of code, but cross browser comparability requires a few more lines to cater for vendor specific styles. This tutorial looks at how to create a 3 stage gradient. We will start by making an empty div in our html.


<div id="gradient"></div>


This div will be the based for displaying our gradient. Now we need to set our base background colour. This will be used for reference and also for comparability if any browsers don’t support CSS3 gradients. We will look at the simplest way to implement this gradient below:


background: -webkit-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%);


The css style above is simply setting a background property, but instead of using an image or colour, we are defining a “-webkit-linear-gradient”. This is the property for any webkit browsers to render a linear gradient. First we tell it to start from the top with our background colour of #375C81 (at 0%). Then we tell it to use the colour #375C81 at 50% (half way) and then tell it to use the colour #375C81 again at 100%. This gives us our three stage gradient, top middle bottom. This syntax is used for a few vendors, so simply changing the vendor starting tag will allow you to support multiple browsers straight away.


background: -webkit-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%);
background: -moz-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%);
background: -o-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%);
background: -ms-linear-gradient(top,#375C81 0%,#3E6992 50%,#375C81 100%);
background: linear-gradient(to bottom,#375C81 0%,#3E6992 50%,#375C81 100%);


There is one more style we need to include to ensure we support all webkit browsers. The syntax for this style is below and is almost the same as the previous examples.


background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#375C81),color-stop(50%,#3E6992),color-stop(100%,#375C81));


The main difference with the style above is we specify our starting point and end points before our colours. We specify a liner gradient to start at left top, and end at left bottom, this creates a veritcal gradient. Then we set our colours as before but using the in-built color-stop function.


To scale the gradient, we can change the “50%” value to a higher a lower percentage and based on that value we will see more or less of the top and bottom gradient colours.


Your result should look similar to the example below:


That is how to create a 3 stage gradient in pure CSS3. Another benefit of using CSS, is you can scale your gradient using the height and width of your div with no loss of quality and with no need for another image to be made.

Read more from CSS

Share your thoughts, post a comment.


Note: HTML is allowed. Your email address will never be published.

Subscribe to comments