Gradients in CSS

Gradients in CSS

Gradients are a popular design technique for creating smooth transitions between two or more colors. In CSS, you can apply gradients to backgrounds, borders, and text. There are two types of gradients in CSS: linear and radial.

Linear Gradient

The linear gradient is a color transition that occurs in a straight line. To create a linear gradient in CSS, you need to define the direction of the gradient (top to bottom, left to right, diagonally, etc.), the colors and the positions of the colors in the gradient.

For example, to create a linear gradient that goes from red to blue, top to bottom, the CSS code would be:

background: linear-gradient(to bottom, red, blue);

The code above defines that the gradient should go "to bottom" (from top to bottom), and the colors "red" (red) and "blue" (blue) are the colors of the gradient.

You can also set positions for the gradient colors. For example, to create a gradient that goes from red to blue, top to bottom, but with a yellow stripe in the middle, the CSS code would be:

background: linear-gradient(to bottom, red, yellow 50%, blue);

The code above defines that the color "yellow" (yellow) should be applied at the 50% position of the gradient.

Radial Gradient

The radial gradient is a color transition that occurs in a circle. To create a radial gradient in CSS, you need to define the center point of the gradient, the size of the gradient, and the colors and positions of the colors in the gradient.

For example, to create a radial gradient that goes from red to blue, with a center point in the middle of the element, the CSS code would be:

background: radial-gradient(circle at center, red, blue);

The code above defines that the gradient should be a "circle" (circle) with a center point in the "center" (middle) of the element, and the colors "red" (red) and "blue" (blue) are the colors of the gradient.

It is also possible to define the size of the gradient, for example to create a radial gradient that goes from red to blue, with a center point in the middle of the element and a size of 50%, the CSS code would be:

background: radial-gradient(circle at center, red, blue 50%);

The code above defines that the gradient should be a "circle" with a center point at the "center" of the element, and the color "blue" should be applied at the 50% position of the gradient.

Conclusion

CSS gradients are a powerful technique for creating smooth transitions between two or more colors. With the ability to apply gradients to backgrounds, borders, and text, you can create interesting and eye-catching designs. Experiment with different directions, colors, and positions to create unique, custom gradients.

Next page of the Free Ebook:

10CSS fonts

4 minutes