1

I found this lying around:

background-image: -moz-linear-gradient(center top, #B6D3F4, #5483B8);

I assume the 2nd and 3rd params are the start and end color of the gradient, but what exactly does the first param "center top" mean?

Given that -moz-linear-gradient is obviously specific to Mozilla, what's the equivalent CSS3 standard version of this rule?

2 Answers 2

2

Please have a look to the MDN. If I read right you can obmit the prefix.

<side-or-corner>

Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.

The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.

Sign up to request clarification or add additional context in comments.

Comments

2

For all browsers:

background: #b6d3f4; /* Old browsers */
background: -moz-linear-gradient(top,  #b6d3f4 0%, #5483b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6d3f4), color-stop(100%,#5483b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* IE10+ */
background: linear-gradient(top,  #b6d3f4 0%,#5483b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6d3f4', endColorstr='#5483b8',GradientType=0 ); /* IE6-9 */

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.