Using Gradients and Border Radius in CSS3: Part II

Introduction

Continuing further from the previous Using Border Radius and Gradients in CSS3: Part I article, where we saw a basic introduction to using gradients, in this article, we will see how to use more complex gradients. Let's take an example of a linear gradient again.

Create the following HTML file and save it as index.html.

Index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Testing CSS3</title>
    <meta name="description" content="">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <article>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie blandit elit sit amet vulputate. Nullam nec pharetra mi. Sed aliquet, turpis a rhoncus molestie, odio sapien imperdiet elit, non consequat sapien magna eu sem. Nulla facilisi. Vivamus augue enim, aliquam id vestibulum vitae, laoreet quis massa. Integer lacinia ultrices enim, id tristique justo blandit vitae.
        <br><br>
        Donec nulla lectus, mattis vel pellentesque non, interdum ut nunc. Suspendisse potenti. Quisque a mauris dui. Nulla dictum augue eu lorem ornare sollicitudin egestas leo lacinia. Suspendisse potenti. Phasellus interdum lectus vel ipsum porta egestas. Maecenas in elit ut tortor vestibulum tristique. Proin imperdiet, felis non varius interdum, ipsum nisi malesuada metus, a porttitor est nibh non tortor. Duis diam diam, facilisis vel egestas eu, tempor ut nunc. Nam pharetra, tellus lacinia semper tempor, elit metus adipiscing massa, ut gravida neque felis vel libero.
        <br><br>
        Sed semper tincidunt viverra. Mauris egestas nunc at nibh condimentum volutpat. Phasellus imperdiet adipiscing quam nec condimentum. Aenean at ornare sem. Vestibulum vitae nibh ligula. Ut ac egestas nisi. Sed a nisl lorem, vel pretium neque. Duis tincidunt nulla sit amet odio euismod ut blandit augue congue. Quisque ac lorem vitae nisl cursus volutpat. Phasellus bibendum lacinia feugiat. Nunc enim ligula, auctor iaculis commodo et, varius sit amet libero. Maecenas eu ante ut purus luctus semper eu et elit. Maecenas sit amet lectus justo.
        <br><br>
        <a href="http://www.lipsum.com/feed/html">About Lorem Ipsum</a>
    </article>
</body>

</html>

This HTML file is identical to the one created in the previous article. The only change will be the styles we apply. Save the following code in a file named style.css under the css folder.

css/style.css

article {
    display: block;
    text-align: justify;
    width: 600px;
    margin: 1em auto;
    padding: 25px;
    color: black;
    /* for Firefox */
    background-image: -moz-linear-gradient(45deg,
        #0000FF 8%,
        #FF6633 20%,
        #FFFF00 40%,
        #00FF00 60%,
        #FF3300 80%,
        #AA00AA 100%);
    /* for WebKit */
    background-image: -webkit-linear-gradient(45deg,
        #0000FF 8%,
        #FF6633 20%,
        #FFFF00 40%,
        #00FF00 60%,
        #FF3300 80%,
        #AA00AA 100%);
    /* for Opera */
    background-image: -o-linear-gradient(45deg,
        #0000FF 8%,
        #FF6633 20%,
        #FFFF00 40%,
        #00FF00 60%,
        #FF3300 80%,
        #AA00AA 100%);
}

Similar to the earlier example, here too, care is taken to include code that will work on multiple browsers instead of catering to just one. Again when you view the HTML file in various browsers, you will find identical output everywhere similar to the one shown below.

This colorful effect has been achieved using a combination of a start color, and end color and some color stops in between. A color stop is an in-between value and has a color and a position. When the browser fades the color from one stop to the next stop, a smooth multi-color effect is created, thus resulting in a gradient.

You can tweak or fine-tune the various values in the background-image property shown above until you get the color effect you are looking for. Alternatively, instead of using only hexadecimal color codes, you can also work with decimal color codes, that is, the RGB color combination.

article {
  display: block;
  text-align: justify;
  width: 600px;
  margin: 1em auto;
  padding: 25px;
  color: white;
  /* Mozilla gradient syntax */
  background-image: -moz-linear-gradient(0% 0% 270deg,
    #800000 0,
    #0000ff 37%,
    #000404 83%,
    #000000 92%,
    #000404 98%);  
  /* W3C gradient syntax for WebKit */
  background-image: -webkit-linear-gradient(top,
    #800000 0,
    #0000ff 37%,
    #000404 83%,
    #000000 92%,
    #000404 98%);   
  /* W3C gradient syntax for Opera */
  background-image: -o-linear-gradient(top,
    #800000 0,
    #0000ff 37%,
    #000404 83%,
    #000000 92%,
    #000404 98%);    
  /* Unprefixed W3C syntax */
  background-image: linear-gradient(top,
    #800000 0,
    #0000ff 37%,
    #000404 83%,
    #000000 92%,
    #000404 98%);    
  /* Old WebKit syntax */
  background-image: -webkit-gradient(linear,
    #800000 0,
    #0000ff 37%,
    #000404 83%,
    #000000 92%,
    #000404 98%);
}

This will result in an output similar to the below.

In all the examples so far, we have used gradients with background colors. However, the use of gradients need not be confined to background alone. You can use them in borders, lists, and other elements wherever applicable. However, as of now, browser support for such borders is limited.

Of course, if you are too lazy or don't have time to sit and churn out the various codes required to create a gradient, you can use ready-made tools.

Conclusion

This article explored further ways of working with gradients.