CSS – how to create a background gradient

Question

Roy Duval

@royduval

1 0 0

CSS – how to create a background gradient

posted 3 years ago 9:10 pm CSS

Updated on May 4, 2020 - 6:46 pm

I’m new to CSS and I was wondering how you can add a gradient to the background of my site?

Reply

Share a link to this topic

close

1 Reply

Latest Likes Active

February 22, 2020 at 9:28 pm

Bram Reed @bramPower User 0 0 0 · 3y · Answer 1 · 2020-02-22T21:28:40

CSS provides linear and radial gradients.

Code Grid:

{"settings":{"resources":[],"title":"Linear Gradient"},"code":{"html":"","js":"","css":"body%7B%0A%20%20%09background%3A%20linear-gradient(90deg%2C%20rgba(131%2C58%2C180%2C1)%200%25%2C%20rgba(253%2C29%2C29%2C1)%2050%25%2C%20rgba(252%2C176%2C69%2C1)%20100%25)%3B%0A%7D"}}

body{
  	background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

Code Grid:

{"settings":{"resources":[],"title":"Radial Gradient"},"code":{"html":"","js":"","css":"body%7B%0A%20%20%09background%3A%20radial-gradient(circle%2C%20rgba(63%2C94%2C251%2C1)%200%25%2C%20rgba(252%2C70%2C107%2C1)%20100%25)%3B%0A%7D"}}

body{
  	background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
}

CSS – how to create a background gradient

1 Reply

Bram Reed

Your Reply