Using Border Radius and Gradients in CSS3: Part I

Introduction

Earlier, when Web designers and developers needed to use gradient colors in their Web pages, they had to find some workarounds such as creating a gradient in Photoshop and then importing it as an image in the HTML file. However, thanks to the amazing abilities of CSS3, you can now easily create gradients within your stylesheet itself. If in case you are not aware of the term gradient, it means a smooth change over from one color or more colors to another.

There are basically two types of gradients supported in CSS3, namely, linear and radial.

In a linear gradient, colors shift across in a linear fashion from one position to another, such as top to bottom, left to right, or so on.

Let's take an example of a linear gradient to understand this better. In this example, the color will shift or alter from light green to white, from top to bottom.

To achieve this effect, first, create the following HTML file and save it as index.html.

Index.html

<!DOCTYPE html>
<html lang="en">

<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>