Gradients and Background Gradients

Background gradients create interesting background effects by changing from one color to another as the color crosses an element.

Linear Gradient Notation

We can specify beginning and ending color, or multiple colors. We can also control direction and where the color changes occur.

.lineargradient {background: linear-gradient(red, blue);} creates a linear gradient from red to blue, moving top to bottom.

.lineargradient {background: linear-gradient(to top right, red, blue);} creates the same gradient but moving to the top right corner.

.lineargradient {background: linear-gradient(black 2%, gray 25%, white 50%, gray 75%, black 100%)} specifies a linear gradient with the colors changing at the specified locations.

Radial Gradient Notation

We can create a radial background in a circular pattern also.

.radial-gradient {width: 400px; height: 200px; Background: radial-gradient(yellow, orange, red);}

The following creates an interesting effect where the radial portion is at the bottom of the space.

.radial-gradient {width: 400px; height: 200px; Background: radial-gradient(12rem circle at bottom, yellow, orange, red);}

Repeating Gradients

Both linear and radial gradients can be repeated.

The following example creates a gradient that repeats every 20px.

.repeating-gradient {background: repeating-linear-gradient(to right, blue, red 20px);}

Background Gradient Patterns

These are amazing but take a significant amount of work to create from scratch. Please see the following sites for examples.

CSS Pattern Library

List of Pattern Libraries

Using a Linear Gradient to Darken a Hero Image

A hero image is simply a large image often displayed at the top of a page (and frequently containing a title). These images may be too bright; one way to darken them slightly is to use a linear gradient as seen below.

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("assets/header.jpg");

.hero {
    width: 800px;
    height: 533px;
    background-image:url(images/AlleySpringMill.JPG);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    text-transform: uppercase;
}

.hero1 {
    width: 800px;
    height: 533px;
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/AlleySpringMill.JPG);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    text-transform: uppercase;
 }