About CSS Gradients
CSS allows you to create smooth transitions between 2 or more colours without using image files. These can be used for backgrounds, text colour, borders and bullet point styles. There are three different gradient styles: linear-gradient (where the colour changes along a straight line), radial-gradient (where the colour changes as you get further from the centre) and conic-gradient (where the colour changes based on angle).
Applying a gradient to a background
You can set gradient to the background property, or use the background-image property if you just want to set the gradient, keeping properties such as background-size the same. Gradients are a form of image, so you can use properties such as background-repeat and background-position to control where exactly they are displayed.
How do I apply a gradient to text?
The color attribute does not support gradients, so to apply a gradient to some text you need to set the background to the gradient, use both the background-clip and -webkit-background-clip properties (due to compatibility issues) to restrict the background to only show where the text is, and then set color: transparent so that the background can show through. By default the background will stretch to fill the whole element, so you need to set the display to inline.
background: linear-gradient(black, white);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
If you are setting the gradient with the background property this will overwrite any background clipping, so you must put the background and -webkit-background-clip properties after the background.
Gradient borders
You can set a gradient to the border-image property to only show it on the border of an element. This allows the parent element to be seen behind, but it does not support the border-radius.
border-width: 10px;
border-style: solid;
border-image: linear-gradient() 1;
Alternatively, you can put different gradients for the border (on the border-box) and the background (on the padding-box). This does not allow elements to be seen behind. You then set the border to be transparent. This way allows you to set the border-radius property for curved corners.
background:
linear-gradient(white, white) padding-box,
linear-gradient(yellow, pink) border-box;
border: 14px solid transparent;
border-radius: 20px;
Patterns
As well as simple gradients, the CSS gradient effects can be used to create a variety of patterns.
Polka dots
Dots are created with the radial-gradient. Set the shape to closest-side so that the percentages work correctly, and the shape to circle or the dots will be stretched if your background-size is not square. You can adjust the background-size to adjust the size of the dots and the gaps between them. For the background colour put a final stop at 100%. This can be set to transparent if you want the parent element to show through.
Checkerboard
You can create checkerboard patterns with either 2 or 4 different colours. If you have 2 colours use a repeating-conic-gradient with colour stops at 25% and 50%. You can turn this into a diamond pattern by setting the angle to 45deg. For 4 colours use a conic-gradient with the colours at 0%, 25%, 50% and 100%.
Stripes
To create a striped effect you need to set the background-size such that the sides line up. If the stripes are neither vertical nor horizontal you need to set the percentages to half of what they would otherwise be. You can calculate the code for the stripes with this calculator.
background: repeating-linear-gradient()