How to add Gradient to the website using Html, CSS

Adding gradients to a website can help enhance its design and overall aesthetic. In this article, we will explore how to add gradients to your website using HTML and CSS.

HTML CSS gradient

In CSS, you can add a gradient background to an HTML element using the background-image property and the linear-gradient function.

Here’s an example of a linear gradient from top to bottom, transitioning from red to blue:

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

If you want to add a radial gradient, you can use the radial-gradient function instead.

Here’s an example of a radial gradient transitioning from yellow in the center to blue at the edges:

body {
  background-image: radial-gradient(yellow, blue);

In this way, you can create a gradient for your website or background. Thank you.

Read also, How to link CSS to HTML in Visual Studio Code.

Leave a Comment