In CSS, gradients allow us to smoothly transition between two or more colors.
There are two types of gradients:
Linear
Radial
selector {
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
}
.bg-gradient {
background-image: linear-gradient(to right, #F5F5F5, #333);
}
"to right": Specifies the direction of the gradient (we can use other directions like to bottom, to top, etc.).
#F5F5F5 and #333: Color stops; you can define as many color stops as we like.
selector {
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}
.bg-radial-gradient {
background-image: radial-gradient(circle, #F5F5F5, #333);
}
"circle": Specifies the shape of the gradient (we can use other shapes like "ellipse", "closest-side", etc.).
"#F5F5F5" and "#333": Color stops; we can define as many color stops as you like.
We can specify color stops using various formats such as "hex", "rgb", "rgba", "hsl", "hsla", etc.
We can also use the transparent keyword to create transparent gradients.
Gradients are often used for "backgrounds", "borders", and "text" effects to create visually appealing designs.