For 7.1 instructions, scroll down just a little further.
The following instructions primarily cover 7.0. This article was written before Squarespace 7.1 was released. Now that you've seen a few ways that big companies use gradients on their websites, let's go over how you can add gradients to your website! So how do you add gradients to your Squarespace website? Here are a few examples of gradients that you may have seen around the web. The following table provided by shows the level of browser support for this feature.For example, this block has a gradient background. It's also being further defined in CSS Image Values and Replaced Content Module Level 4 (Editor’s Draft).The linear-gradient() function is defined in CSS Image Values and Replaced Content Module Level 3 (W3C Candidate Recommendation 17 April 2012).The stop position, if specified, can be provided in a percentage or length value. color-stop A color stop is a color value, followed by an optional stop position.
to bottom left The gradient line is angled such that it points into the same quadrant as the bottom left corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners. to bottom right The gradient line is angled such that it points into the same quadrant as the bottom right corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners. to top right The gradient line is angled such that it points into the same quadrant as the top right corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners. To top left The gradient line is angled such that it points into the same quadrant as the top left corner, and a line drawn perpendicular to the gradient line through the center of the gradient box intersects the two neighboring corners. The following keywords specify a corner to point the gradient line: The following keywords specify a side to point the gradient line: Specifies an angle for the direction of the gradient. Here's an example of specifying the angle in degrees:Īs indicated in the official syntax, the linear-gradient() function accepts the following values: angle The start and end points are located outside the box, however, they are located precisely where they need to be in order to have the pure color exactly at each corner (purple is exactly at the bottom left corner, and yellow is exactly at the top right corner). The gradient line has a start point and an end point. Therefore the gradient line is -45 degrees (or 315 degrees). The gradient line runs perpendicular to the painted lines of the gradient. 45deg, 90deg, 180deg) or with one of the keywords for specifying the angle (such as to top, to bottom, to top left, etc).Ī linear gradient running at a 45 degree angle between purple and yellow. You can specify this with an angle value (e.g. You can set the angle of the gradient line so that the gradient runs along that angle.
BACKGROUND COLOR CSS GRADIENT HOW TO
How to set the Angle of a Linear Gradient Color stops are then placed along that gradient line to create a gradient that runs between each color. Linear gradients are created by establishing an axis called the gradient line. Linear gradients can go in any direction - up, down, sideways, 45 degrees, 63 degrees, or any other angle you like. This is in contrast to radial gradients which have a circular or elliptical shape. Linear gradients are gradients that run in a straight line. CSS gradients use these properties to build an image of the specified gradient. To create a linear gradient, use the linear-gradient() function as a value to any property that accepts images (for example, background-image, background, or border-image properties).
0 kommentar(er)
