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-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.
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");
