CE4 supports the use of CSS3 linear-gradients for page element backgrounds. The standard set of controls for linear-gradients looks like this:
When using linear-gradients, it's important to be aware of limited browser support. Linear gradients are supported in the following desktop browsers:
On mobile, linear-gradient support exists for:
Older browsers not supporting linear-gradients will fall back on the element's defined background-color. Therefore, when setting a linear-gradient, set an appropriate background-color first.
The Color Stop slider controls the coverage of the gradient as a percentage of the document area. A value of 100% will cause the gradient to cover the entirety of the document, while a value of 50% will cause half the document to be gradient, while the remaining half is a solid color.
The Direction slider controls the direction of the gradient. Due to its using an older version of the CSS3 linear-gradient specification, the direction of your gradient, as visible in the Lightroom 5 Web preview, will round off to the nearest cardinal or ordinal compass direction. Outside of Lightroom's preview (i.e. online) the linear-gradient's direction will be more precise to the set value.
For accurate results in the preview, use the values 0, 45, 90, 135, 180, 225, 270, 315 or 360, which represent cardinal (0, 90, 180, 270, 360) and ordinal (45, 135, 225 and 315) compass directions. Values in between will round to the nearest cardinal or ordinal compass direction. Use the following table to translate your values.
|Value Range||During Preview, Rounds to …||Description|
|0 - 23||0||bottom to top|
|24 - 67||45||bottom-left to top-right|
|68 - 112||90||left to right|
|113 - 157||135||top-left to bottom-right|
|158 - 202||180||top to bottom|
|203 - 247||225||top-right to bottom-left|
|248 - 292||270||right to left|
|293 - 337||315||bottom-right to top-left|
|338 - 360||360||bottom to top|
Color A is the gradient's beginning color.
Color B is the gradient's ending color.
Color A and Color B each have an alpha slider which controls the color's opacity, with a value of 0 being completely transparent and a value of 100 being entirely opaque.
The linear-gradient rests atop the element's background-color. Therefore, if your linear gradient is partially transparent, and your background-color for the element is white, then the white background will show through the linear-gradient.
The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.