1. Home
  2. Webmaster's Auxiliary Tools
  3. Firefox's Linear Gradients Online Debugging Tool

Firefox's Linear Gradients Online Debugging Tool

IDSP This is an online debugging tool for Firefox's Linear Gradients that allows for online debugging and previewing. The right side has real-time debugging and display preview functions, and it can also generate the corresponding effect code in real time. Below the code, there is a detailed explanation of the principles and usage of linear gradients, which is convenient for those who need it.

Effect Setting Area

Basic Effects

%
%
%

Stops

%
Delete StopAdd Stop

Preview Area

Code Area

Explanation

Safari 4 Firefox 3.6 Opera Chrome Internet Explorer

  • The basic syntax for Firefox's Linear Gradients is: background-image:-moz-linear-gradient([<point> | | <angle>,] , start color value, end color value, [(stopping color value, offset percentage),...] );
  • -moz-linear-gradient is a property value of background;
  • The first set of parameters <angle position> is very flexible, its basic composition is the position <point> (the starting point of the gradient) and the angle;
    • <point> The starting point of the gradient: It can be specified as a percentage, pixels, or using "left", "center", or "right" for horizontal and "top", "center", or "bottom" for vertical positioning. The position is from the upper left corner of the most affected element.
    • If it's only a horizontal gradient, just set: "left center" or "right center". If it's a vertical gradient, set "center top" or "center bottom". In Firefox, "center" can be omitted, so if it's only a horizontal gradient, just set: "left" or "right", and if it's a vertical gradient, set "top" or "bottom".
    • If these two values are percentages, then the first one is the horizontal gradient position, and the second one is the vertical gradient position. At this time, an angle value is also needed, such as "9deg"; you can see the examples on this page;
    • It can also be just an angle value.
  • (start color value), (end color value) are two gradient color values;
  • [(stopping color value, offset percentage),...]: Multiple color-stops can be used. If the gradient only has two colors, this parameter can be omitted; the offset must be between % and 100%;
  • WebKit-based Safari and Chrome's Linear Gradients
  • For IE, you can use gradient filters, please refer to: http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx