Html Question posted in
Some basic documentation can be found here.

Html – How do I get a continuous, clean gradient on my website?

I’ve been learning HTML and CSS in the hopes of building my own website and discovered the gradient function. Applying it to the body of my website works, however it’s not a single continuous gradient – rather, it seems to be copied over and over again like this.

My WIP website

My WIP website.

I was expecting one clean, continuous gradient, much like this:

The gradient I expected

The gradient I expected

Tags:

2

Answers


  1. 0

    I’m not sure what exactly did you use. But simply using linear-gradient should work. Here’s a code sample

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to bottom, #b388eb 0%, black 100%);
}

h1 {
  font-size: 48px;
  text-align: center;
  color: white;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World!</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello world!</h1>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Seems like you are almost there. Here’s the code that should work:

    background: linear-gradient(0deg, rgb(28,28,28) 0%, rgb(62,39,84) 75%);

    The 1st argument: ‘0deg’, means the gradient layers are horizontal. Please feel free to modify the colours as per your choice.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search