How to Work with Linear Gradients in CSS3 - dummies

How to Work with Linear Gradients in CSS3

By John Paul Mueller

Most people will want something a little more exciting than a background color or a frame for their CSS3 sites. For example, you can rely on a linear-gradient() function to perform the task. Using a linear-gradient(), you can create lines (horizontal, vertical, and angled), diamonds, and squares.

When you combine the linear-gradient() with other gradient methods (such as the radial-gradient()) you can create all sorts of patterns. For now, create a simple linear-gradient() using the following procedure to get a feel for how they work.

  1. Create a new HTML5 file with your text editor.

  2. Type the following code for the HTML page.

    <!DOCTYPE html>
     <title>A Non-image Background</title>
     <link rel="stylesheet"
      href="PatternedBackground.CSS" />
     <h1>A Simple Heading</h1>
     <p>Simple text to go with the heading.</p>

    The main purpose of this example is to focus on backgrounds, so the content is quite simple. All you see is a simple header and paragraph.

  3. Save the file as PatternedBackground.HTML.

    The sample will appear in other chapters, so naming is important.

  4. Create a new CSS file with your text editor.

  5. Type the following CSS style information.

     background: linear-gradient(
     45deg, Crimson, Transparent, RoyalBlue);
     background-color: #00ff00;
     background-size: 100px 100px;

    The focal point of this pattern is the background property, which relies on the linear-gradient() function. You can use this function in a number of ways; the example shows one simple way. It begins by telling the linear-gradient() function to draw the line at 45 degrees.

    There are three colors in the gradient: Crimson, the background color (Transparent shows the background), and RoyalBlue. The gradient will begin with Crimson, transition to the background color, and end with RoyalBlue, all in equal proportions.

    The background-color property defines a value of green in this case. The background-size property defines the size of the gradient pattern. It would be easy to obtain a number of different effects using the same linear-gradient() and varying these last two properties.

  6. Save the file as PatternedBackground.CSS.

    The sample will appear in other chapters, so naming is important.

  7. Save the HTML file and reload the page.

    You see the background shown, which is actually quite dramatic. The background automatically repeats no matter how the user resizes the window.


It’s possible to combine graphics and gradients to create even more unusual effects without resorting to programming. Simply replace one of the color entries with the URL for a downloadable graphic using the url() function. The resulting gradient will combine color, graphics, transparency, and transition effects to create an unusual background for you.