As it turns out, background tiling works just as well for linear gradients as for other images (which is to say, very well), except when the gradient has an linear direction that is not horizontal or vertical, because the grid is still horizontal and vertical and therefore does not allow seamless joins. That's a pretty big exception, but with programatically created gradients we have a chance of fixing it in ways that were never available when all background images were externally created raster files.
The basic idea is that we can look at the gradient direction from the image, and then instead of drawing the gradient in that direction directly, we instead set it to 0deg (left to right) and then rotate the whole background counterclockwise by the degrees specified. This allows the gradients to tile seamlessly, whatever the specified gradient direction, and exposes the full power of background properties to be used with gradients in a natural and intuitive manner (including using background-size and background-position and animations just the same as you would with any other repeating background tiles).
In the examples below, raster images are use for the gradient. The first column uses a vertical gradient; the second column uses a 45deg gradient with no modification of the way backgrounds work; and the third column shows a simulation of the background-repeat adaptation that I am proposing.
| Vertical | Angled | Angled (improved) |
|---|---|---|
| 90deg (bottom to top) | 45deg. Using normal background-repeat, this produced a very different result than in the horizontal or vertical cases. | Instead of using the gradient angle to set the direction inside the image, use it to set the rotation of the background layer (simulated here). |
Vertical dimension is sized down using 'background-size' height. Width doesn't matter. For generated gradients, gradient direction should always be considered by 'background-repeat' to be the vertical dimension. |
This is a very different effect, and not what an author wants when turning a gradient from the horizontal or vertical. 'background-size' width makes it look different, but doesn't fix the problem. |
This is what we really want when we rotate the gradient when it is part of a patterned background. |
This row is the same as above, but with a larger 'background-size' vertical dimension. One one number is different to change all three columns, in a way that is familiar and intuitive. |
||
In this row, the background-position is animated. |
Not what I had in mind. |
I want to be able to do this by just changing the gradient angle from the version on the far left, which does its thing by animating just a standard background property. |
In this row, the background-size is animated. It may be a little choppy, since it is resizing raster graphics in real time. |
Not what I had in mind. |
I want to be able to do this by just changing the gradient angle from the version on the far left, which does its thing by animating just a standard background property. |
I am proposing the creation of a new property, 'background-rotate' that can take angles as values, but can also take 'auto' as a value. When 'auto' is used, and the 'background-image' is a linear gradient, then the gradient within the image should be drawn as though the direction is 0deg, and that computed direction of the gradient be used to rotate the canvas of that background layer counterclockwise instead. The background drawing area and background positioning area should be expanded so that they still touch all four corners of the element box after being rotated. That's it. End of Proposal. It's not magic, it is just useful and simple.