jose tanaka
jose tanaka

Reputation: 489

How can I make my linear gradient to work?

background: -webkit-linear-gradient(linear,left top, left 
bottom,from(#5ba654), to(#ADE19E));

I`m not sure what I am doing wrong here...please help.

Upvotes: 2

Views: 26

Answers (2)

Văn Quyết
Văn Quyết

Reputation: 2526

background: -webkit-linear-gradient(#5ba654, #ADE19E);
background: -moz-linear-gradient(#5ba654, #ADE19E);
background: linear-gradient(#5ba654, #ADE19E);

Syntax: background: linear-gradient(direction, color1, color2, ...);

Default direction is top to bottom.

Upvotes: 2

Owen Glen
Owen Glen

Reputation: 66

That code will only work in a WebKit browser hence the -webkit tag. There's a really handy CSS gradient generator here that I used to generate the code below.

.gradient {
  height: 200px;
  width: 100%
  background: #5ba654;
  background: -moz-linear-gradient(top, #5ba654 0%, #ade19e 100%);
  background: -webkit-linear-gradient(top, #5ba654 0%,#ade19e 100%);
  background: linear-gradient(to bottom, #5ba654 0%,#ade19e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ba654', endColorstr='#ade19e',GradientType=0 );
}
<div class="gradient">
</div>

Upvotes: 1

Related Questions