User Tools

Site Tools


Linear-gradient Backgrounds

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:

  • Chrome 10.0+
  • Firefox 3.6+
  • Internet Explorer 10+
  • Safari 5.1+
  • Opera 11.6+

On mobile, linear-gradient support exists for:

  • Android Browser 4.0+
  • Blackberry Browser 10.0+
  • Chrome for Android 31.0+
  • Firefox for Android 25.0
  • Internet Explorer Mobile 10.0+
  • iOS Safari 5.0+
  • Opera Mobile 12.0+

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.

Color Stop

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.

Linear-gradient Direction

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 & B

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.

ce4_linear-gradients.txt · Last modified: 2014/01/08 04:13 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.