Background Color(set to gradient) changing when adding text

HTML-CSS
#1

So I created my own color gradient via this website

I then pasted it into the CSS for my project.
However, I can’t seem to rotate the direction of the gradient? I’m trying to make it go from top left down to bottom right rather than horizontally?

Also, if I insert text in the h1 element, the background changes for some reason?

why is this?

#2

You can. Just change that: (40deg, ((colors)) )

Add that to your code:

  background-repeat: no-repeat;
  height: 100vh;
1 Like
#3
#4

I’ve changed the 40deg to 70deg however it looks exactly the same?

Added the background-repeat and that solved it. Thank a lot.

#5

Ummm… I can’t see your updated pen

#6

As you can see the direction of the gradient is the exact same as it was in the previous version of the pen I originally posted. The only observable difference I’m seeing when I change the degrees is the definition of those horizontal divisions. I can’t figure out why those horizontal divisions are there in the first place.

#7

That is background-repeat. Use:

See that

Every CSS Background Property Illustrated and Explained with Code Examples 🎖️

1 Like