CODEWITHSUNDEEP
htmlcsslinear-gradients
AndreaNobili
AndreaNobili

Reputation: 42957

How to correctly use the linear-gradient?

I am pretty new in CSS3 and I have the following style in a CSS file of my project:

.headerDiv {
    background-image: linear-gradient(#04519b, #044687 60%, #033769);
    ............................
    ............................
    ............................
}

It is pretty clear to me what linear-gradient(#04519b, #044687 60%, #033769); should do (it creates a vertical gradient as a background of a div with the class name headerDiv.

I have to change it the colors of the gradient, so I found on Google this documentation: http://www.w3schools.com/css/css3_gradients.asp

The problem is that I can't find the syntax used in my CSS file.

So related to my:

linear-gradient(#04519b, #044687 60%, #033769);

what exactly represent the:

1) First value (#04519b)

2) Second value (#044687 60%), what does 60% mean?

3) Third value (#033769)

I know that these are changing the gradient color but I don't know the exact ordered and what 60% means.

Upvotes: 3

Views: 1116

Answers (2)

Harry
Harry

Reputation: 89750

The gradient linear-gradient(#04519b, #044687 60%, #033769); can be interpreted as follows:

  • The gradient is from top to bottom of the div. This is the default direction which is used if no angle (like 45deg) or no direction (like to right) is specified.
  • The first color (that is at 0%) is #04519b. If no color-stop position is specified for the first color then it is assumed to be 0% as per spec.
  • The 60% is a color-stop position. That is at 60% of the height of the gradient image, the color should exactly be #044687.
  • This implies that between 0% and 60%, the color gradually changes from #04519b to #044687.
  • The final color (that is at 100%) is #033769. Similar to the first color, if no position is specified for the last color, it is assumed to be at 100%.
  • This implies that between 60% and 100%, the color gradually changes from #044687 to #033769.

div{
  height: 100px;
  width: 100%;
  background: linear-gradient(#04519b, #044687 60%, #033769);
}
<div></div>

Upvotes: 6

Arun Kumar
Arun Kumar

Reputation: 1667

This is syntax for linear-gradient

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction

left,right,toright,..
left top,bottom right,..
180deg,80deg,90deg..

Upvotes: 0

Related Questions