CODEWITHSUNDEEP
htmlcss
Cosmin Ciolacu
Cosmin Ciolacu

Reputation: 494

Can't apply background gradient

I created a basic form in HTML and an app.css file to style the page. When I set a gradient as the background-image it doesn't show on page:

HTML,
body {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}
<body>
    <div class="today">
      <div
        class="titlu"
        style="color: black; margin-top: 5.5%; font-size: 65px;"
      >
        Autentificare
      </div>

      <form id="form" method="POST">
        <div class="form-group">
          <label for="email">email:</label>
          <input type="email" name="email" class="form-control" id="email" />
          <span id="msg"></span>
        </div>
        <div class="form-group">
          <label for="parola">Parola:</label>
          <input
            type="password"
            name="parola"
            class="form-control"
            id="parola"
          />
        </div>

        <div class="form-group">
          <button class="btn btn-outline-success btn-block elev">
            Autentifica-te
          </button>
        </div>
        <div
          class="alert alert-danger alert-dismissible fade show"
          style="display: none;"
        ></div>
      </form>
    </div>
</body>

When I open the page in live server it show this: enter image description here

Upvotes: 1

Views: 3118

Answers (4)

Youssef Egla
Youssef Egla

Reputation: 1601

Gradients belong to the image data type, they can only be used where images can be used. For this reason, linear-gradient property won't work on background-color property and other properties that use the color data type.

The correct declaration will be

CSS

body {
background: linear-gradient(120deg, #FF0000 0%, #0000FF 100%);
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Upvotes: 1

Linda Ojo
Linda Ojo

Reputation: 11

Try to remove the percentages, making it look like this

background-image: linear-gradient(120deg, #e0c3fc, #8ec5fc);

and use RGBA instead.

Also, I think there is a typo in your title.

Upvotes: 1

Niall Maxwell-Thompson
Niall Maxwell-Thompson

Reputation: 30

Try using RBG values instead of hex. And setting the height of the background to 100% like so.

    HTML,
    body {
      margin: 0;
      padding: 0;
      height:100%;
      background-image: linear-gradient(to right, rgba(224, 195, 252, 0),rgba (142, 197, 252, 1));
    }

Upvotes: 1

Nikitesh
Nikitesh

Reputation: 17

body{
  background: #0e0c3f;
  background: -moz-linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, #0e0c3f), color-stop(100%, #08ec60));
  background: -webkit-linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  background: -o-linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  background: -ms-linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  background: linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0c3f', endColorstr='#08ec60', GradientType=1 );
  }

You can use this CSS code as you need to webkit to support diffrent browser you might be using diff browser can i know which browser you are using.?

you can use free gradient generator websites to generate gradients code who support every browser or try to accumulate every browser.

Upvotes: -1

Related Questions