A gradient is where one color fades gradually into another color. This can give you a nice subtle effect for shading in backgrounds, buttons, and other HTML elements.
How to Create a CSS Gradient
To create a CSS gradient, you simply use any property that supports an image — gradients can be used in any property that accepts images.
The syntax for gradients consists of a CSS image property (say for example,
background-image), combined with a gradient function. There are four gradient functions:
repeating-linear-gradient. As with any function, the gradient functions accept parameters (which determine how the gradient will look).
Here's an example of the code used to create a basic linear gradient:
background: linear-gradient(red, green);
That's the basic code, however, you do have a number of options as to how your gradient is presented. For example, you can change the position of the gradient, the number of colors, the color stops, and more.
Below are some examples of the different types of gradients you can create using CSS.
Repeating Linear Gradient
You can also create repeating gradients in CSS. Repeating gradients is where you set up a gradient that's smaller than its box, then make it repeat all the way to the edge of the box. Here's an example of a repeating linear gradient:
A radial gradient is a gradient where the colors gradually emerge from a single point and smoothly spread outward in a circular or elliptical shape.
Here's an example of a radial gradient:
Repeating Radial Gradient
As with the repeating linear gradients, you can create repeating radial gradients.
Here's an example of a repeating radial gradient:
The following pages contain more gradient examples and code: