CODEWITHSUNDEEP
htmllinear-gradients
nikhila reddy
nikhila reddy

Reputation: 63

Background-color : linear gradient not working

I have the below HTML code and I want a gradient block. But the gradient is not rendering on browser.

div {
  height: 10px;
  background-color: linear-gradient(to right, #cc0099, #ff9933, #ff3399);
}
<div>hi</div>

Can you please tell me what the issue is.

Thanks in Advance, Nikhila

Upvotes: 0

Views: 7336

Answers (4)

S.Panta
S.Panta

Reputation: 1

linear-gradient should be used along with the height.

background: linear-gradient(120deg,#2980b9,#8e44ad);
height: 100vh;

Upvotes: 0

Tony Tin Nguyen
Tony Tin Nguyen

Reputation: 355

Please change the background-color to background to make the code affected.

    div {
      height: 100px;
      width: 100px;
      display: block;      
      background: linear-gradient(to right, #cc0099, #ff9933, #ff3399);
    }

Upvotes: 3

I_love_vegetables
I_love_vegetables

Reputation: 1341

linear-gradient should be used in background-image

div {
  height: 10px;
  background-image: linear-gradient(to right, #cc0099, #ff9933, #ff3399);
}

Upvotes: 1

connexo
connexo

Reputation: 56773

It has to be background-image, not background-color, for gradients.

div {
  background-image: linear-gradient(to right, #cc0099, #ff9933, #ff3399);
}
<div>hi</div>

Upvotes: 5

Related Questions