A gradient is a smooth transition between two or more colors. In CSS, gradients are treated as code-generated images, so we usually use them in background or background-image.
.cabecera {
background: linear-gradient(#ffffff, #e8f0ff);
}
The browser calculates all the intermediate steps between colors. We only give it the important stops.
Types of gradients
Linear gradients progress in a straight line. By default they go from top to bottom, although we can change the direction with keywords or angles.
.fondo-base {
background: linear-gradient(red, blue);
}
.fondo-lateral {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.fondo-diagonal {
background: linear-gradient(45deg, #673ab7, #ff9800, #ffeb3b);
}
We can also indicate at which point each color appears.
.barra {
background: linear-gradient(
to right,
#2ecc71 0%,
#2ecc71 60%,
#eeeeee 60%,
#eeeeee 100%
);
}
In this example we create a bar where the first color occupies 60%. It’s a simple technique for progress indicators, split backgrounds, or small decorative effects.
Radial gradients expand from a central point outward, in the shape of a circle or ellipse.
.brillo {
background: radial-gradient(circle, #ffffff, #dbeafe);
}
We can move the center of the gradient to simulate a light source.
.panel {
background: radial-gradient(circle at top left, #ffffff, #d7e3ff 45%, #8aa4d6);
}
Conic gradients rotate around a center, like a wheel.
.grafico-circular {
background: conic-gradient(#4caf50 0deg 120deg, #ffeb3b 120deg 240deg, #f44336 240deg);
border-radius: 50%;
}
They are used less frequently than linear ones, but can be very useful for color wheels, pie charts, or border effects.
Multilayer backgrounds
A background property can have several layers separated by commas. The first layer is drawn on top of the following ones.
.hero {
background:
linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 30%)),
url("/img/portada.jpg");
background-size: cover;
background-position: center;
}
This pattern is very common: we place a semi-transparent gradient over an image so that the text is more readable.
