To create a color gradient in CSS, you would use the `linear-gradient()` or `radial-gradient()` function in the `background` property as shown below:
1. Linear Gradient – Top to Bottom (default):
```
body {
background: linear-gradient(red, yellow);
}
```
1. Linear Gradient – Left to Right:
```
body {
background: linear-gradient(to right, red, yellow);
}
```
1. Linear Gradient – Diagonal:
```
body {
background: linear-gradient(to right bottom, red, yellow);
}
```
1. Radial Gradient:
```
body {
background: radial-gradient(red, yellow);
}
```
1. Multiple Color Stops:
```
body {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
```
Each color stop in a gradient is defined with a color value and optionally with a percentage position. If no position is provided, color stops are evenly spaced. For example, `background: linear-gradient(red 10%, yellow 90%);` creates a gradient that starts with red at 10%, transitions to yellow at 90%, and is yellow from 90% to the end.
You can use any valid CSS color value in gradients, including rgb(), rgba(), hsl(), hsla(), and hexadecimal color codes.
