CSS background-color gradient

mfoley · 10-12-2023, 10:59 AM

I'm trying to create a background gradient on my wepage. I've tried (in .css):

Code:

body { background-image: linear-gradient(top left to bottom right, rgb(105,153,255), rgb(226,250,255)) }

The above does nothing. Other permutations I've tried (I won't them them all) give me bands of gradients, about 4 bands vertically with gradients from left to right (e.g. using "to bottom right").

I'm using Microsoft Edge 117.0.

What is the correct syntax for a gradient starting at the upper left and going to the bottom right?

astrogeek · 10-12-2023, 01:45 PM

Quote:

Originally Posted by mfoley

I'm trying to create a background gradient on my wepage. I've tried (in .css):

Code:

body { background-image: linear-gradient(top left to bottom right, rgb(105,153,255), rgb(226,250,255)) }

The above does nothing. Other permutations I've tried (I won't them them all) give me bands of gradients, about 4 bands vertically with gradients from left to right (e.g. using "to bottom right").

I'm using Microsoft Edge 117.0.

What is the correct syntax for a gradient starting at the upper left and going to the bottom right?

Try this (from quick look at The Book of CSS3 from NoStarch Press):

Code:

body { background-image: linear-gradient(to right bottom, rgb(105,153,255), rgb(226,250,255)) }

I am fortunate enough to have never experienced the edgy browser so no idea if it uses some other syntax, although the book indicates this should work from IE10.

mfoley · 10-13-2023, 05:55 PM

Amazing! That worked. That was a simple combination I didn't try. Thanks!

mfoley · 10-19-2023, 09:20 AM

Actually, that didn't work. I must have had a table or DIV that took up much of the screen and I thought it was working. I still get bands of gradient. See attached. The stripped-down html is:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>test Gradient</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body { margin: 0; background-image: linear-gradient(to right bottom, rgb(105,153,255), rgb(226,250,255)) }
</style>
</head>
<body style="font-family: 'Trebuchet MS', Arial; margin-top: 20px">
<div style="text-align: center">October 19, 2023 10:00 AM</div>
</body>
</html>

It shows this way on both Firefox and Edge.

mfoley · 10-20-2023, 11:44 AM

I take it background-image: linear-gradient() simply doesn't work other than "to right" or "to left". Any vertical or diagonal gradients band, as shown in my previous post. For example, I have this simple html:

Code:

<!DOCTYPE html>
<html lang="en">
<body style="background-image: linear-gradient(rgb(105,153,255), rgb(226,250,255)">         
Hello World!
</body>
</html>

This is takes the default direction of "Top to Bottom". It bands. So does "to bottom right". This happens on Linux Firefox 115.3.1esr, Windows Firefox 118.0.1 and Windows Edge 118.0.2088.46.

So, for directions other than "to right" or "to left" linear-gradient() just doesn't work in these browsers, agreed?

scasey · 10-20-2023, 10:11 PM

My go-to for css, among other things, is w3schools
https://www.w3schools.com/colors/colors_gradient.asp
Sometimes I learn. Sometimes I just setup things as i want them to be and copy/paste the resulting code. Their “Try it yourself” editor is very useful.

Edit: just finished reading mfoley’s post. Not using Firefox at the moment. I’m typing on glass in Safari. Check out that link on Firefox. (I’ll try it later…)

Later -- This code:

Code:

<!DOCTYPE html>
<html>
<style>
div {
    height: 800px;
    background: linear-gradient(to bottom, #0000ff 0%, #99ccff 100%)
}
</style>
<body>

<div></div>

</body>
</html>

Works as it should in Firefox 118.0.2

mfoley · 10-26-2023, 12:04 AM

Quote:

Originally Posted by scasey

My go-to for css, among other things, is w3schools
https://www.w3schools.com/colors/colors_gradient.asp
Sometimes I learn. Sometimes I just setup things as i want them to be and copy/paste the resulting code. Their “Try it yourself” editor is very useful.

Edit: just finished reading mfoley’s post. Not using Firefox at the moment. I’m typing on glass in Safari. Check out that link on Firefox. (I’ll try it later…)

Later -- This code:

Code:

    background: linear-gradient(to bottom, #0000ff 0%, #99ccff 100%)

Works as it should in Firefox 118.0.2

My target browser for this application is Edge. "to bottom" bands. In fact, it also bands on Firefox 118.0.2 on my Windows computer. "to right" seems to give the best results.