CSS gradients allow to create smooth transitions between two or more specified colors, which can be used as a background, border, or text color. There are two types of gradients: linear gradients and radial gradients.
Linear gradients create a gradient that follows a straight line. You can specify the direction of the gradient using the
to keyword, followed by the direction that you want the gradient to go, such as
to right for a horizontal gradient or
to bottom for a vertical gradient. Also you can specify multiple color stops using the
color-stop function, which allows to set the position and color of each stop along the gradient.
background-image: linear-gradient(to right, red, blue);
Radial gradients create a gradient that radiates out from a center point. You can specify the position of the center point using the
at keyword, followed by the position you want the center to be, such as
center center for a centered gradient. Like linear gradients, you can also specify multiple color stops using the
background-image: radial-gradient(yellow, orange);
You can also combine multiple gradients to create more complex effects. Here is an example of a button with a background that uses a linear gradient and a radial gradient:
background-image: linear-gradient(to right, #9fbae3, #8f8ce7), radial-gradient(circle at top right, #8f8ce7, #6b8eea);
This creates a button with a blue-purple linear gradient on the left and a purple-blue radial gradient on the top right corner.