lecture 9

What is linear gradient in CSS?

A linear gradient in CSS is a way to create a smooth transition of colors along a straight line. It allows you to specify multiple color stops and control the direction and angle of the gradient. It's a cool feature to add visual interest to your web design!

How to use Linear Gradient in CSS?

To use a linear gradient in CSS, you can use the `background-image` property along with the `linear-gradient()` function. Here's an example:

.element {

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

}

In this example, the linear gradient starts with the color red on the left side and transitions to the color blue on the right side. You can customize the colors, direction, and angle of the gradient to achieve the desired effect.

Example:

Then the Output will be:

What is Radial Gradient in CSS?

A radial gradient in CSS is another way to create a smooth transition of colors, but instead of a linear direction, it radiates outwards from a central point. It allows you to specify multiple color stops and control the shape and size of the gradient. It's a great way to add depth and dimension to your web design!

How to use Radial Gradient CSS?

To use a radial gradient in CSS, you can use the `background-image` property along with the `radial-gradient()` function. Here's an example:

.element {

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

}

In this example, the radial gradient starts with the color red at the center and transitions to the color blue as it radiates outwards in a circular shape. You can customize the colors, shape, and size of the gradient to achieve different visual effects.

Example:

Then the output will be:

Both linear and radial Gradient:

Then the output will be: