0

I want to have a gradient background for my Svelte application. This is the gradient I liked off of this website: https://uigradients.com/#JShine. I copied the HEX codes given by the website and put them in my global CSS file like so:

body {
  background: linear-gradient(#12c2e9,#c471ed,#f64f59);
  margin: 0;
  padding: 2rem;
}

I'm having trouble understanding why the gradient has the very distinct color transition in the middle. I want it to be even throughout like the name gradient mentions. I don't understand what I'm doing wrong, I want a even gradient not that harsh line. I attatched an image of what my page currently looks like.

Note: I do have content on my page, but I didn't want to include the text I have in the image so I found space on my page with no content to screenshot. Also I am aware this is more of a CSS question but I'm not sure if it makes a difference since I am in-fact writing my code using Svelte so I've added that tag as well.

What page currently looks like

Community
  • 1
  • 1
  • No issue on my end, the gradient appears as it should, no harsh lines, simply a smooth blend of two very contrasting colors. Do you get different results in different browsers? – dale landry Apr 05 '20 at 18:19

1 Answers1

3

You need to add background-repeat, background-attachment and height, like following : 

body {
  background: linear-gradient(#12c2e9,#c471ed,#f64f59);
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  margin: 0;
  padding: 2rem;
}
Jérôme
  • 978
  • 1
  • 9
  • 22