Update Record
2023.5.28: Webkit Core Linear Gradient Online Debugging Tool Completed and Launched
  1. Home
  2. Webmaster Assistant Tools
  3. Webkit Core Safari/Chrome Linear Gradients (Linear Gradient) Online Debugging Tool

Webkit Core Safari/Chrome Linear Gradients (Linear Gradient) Online Debugging Tool

　This is a tool that can debug and preview the Webkit Core Safari/Chrome Linear Gradients (linear gradient) effect online. The right side has real-time debugging and preview display features, and can generate corresponding effect code in real time. Below the code, a detailed explanation of the principles and usage of linear gradients is provided for the convenience of users who need it.

Effect Settings Area

Start

%
%

End

%
%

Stop

Delete StopAdd Stop

Effect Preview Area

Code Area

Instructions

Safari 4 Firefox 3.6 Opera Chrome Internet Explorer

  • Basic syntax of Webkit Core Safari and Chrome's Linear Gradients (linear gradient): background-image: -webkit-gradient(type, x1 y1, x2 y2, from(start color value), to(end color value), [color-stop(offset decimal, stop color value), ...] );
  • -webkit-gradient is a property value of background;
  • The first parameter of Webkit Core's Linear Gradients (linear gradient) is type, which is linear;
  • The second parameter is x1 y1, x2 y2, which are the coordinates of the two points of the color gradient body. The values of x1, x2, y1, y2 range from 0% to 100%. When x1, x2, y1, y2 take extreme values, x1 and x2 can take left (or 0%) or right (or 100%), and y1 and y2 can take top (or 0%) or bottom (or 100%);
    • When x1 equals x2 and y1 is not equal to y2, vertical gradient is realized. Adjusting the values of y1 and y2 can adjust the size of the gradient radius;
    • When y1 equals y2 and x1 is not equal to x2, horizontal gradient is realized. Adjusting the values of x1 and x2 can adjust the size of the gradient radius;
    • When y1 is not equal to y2 and x1 is not equal to x2, angular gradient is realized. When x1, x2, y1, y2 take extreme values, they are close to vertical or horizontal gradient;
    • When x1 equals x2 and y1 equals y2, no gradient is realized, taking the from color, that is, "from(color value)";
  • To achieve vertical and horizontal gradients, the simplest values for x1 and x2 are left (or 0%) or right (or 100%), and the simplest values for y1 and y2 are top (or 0%) or bottom (or 100%);
  • from(start color value), to(end color value) are two gradient color values;
  • [color-stop(offset <decimal>, stop color value), ...]: multiple color-stops can be used. If the gradient has only 2 colors, then this parameter can be omitted; the offset must be a decimal, if the offset >= 1, then the color-stop is equivalent to invalid;
  • For Firefox's Linear Gradients (linear gradient), please refer to:
  • In IE, you can use the gradient filter, please refer to: http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx