lighting-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The lighting-color CSS property defines the color of the light source for the <feDiffuseLighting> and <feSpecularLighting> SVG lighting filter primitives within an SVG <filter>. If present, it overrides the element's lighting-color attribute.

Note: The lighting-color property only applies to <feDiffuseLighting> and <feSpecularLighting> elements nested in an <svg>. It doesn't apply to other SVG, HTML, or pseudo-elements.

Syntax

Values

<color>: The lighting's color. This can be any valid CSS <color> value.

Formal definition

Initial value	`white`
Applies to	`<feDiffuseLighting>` and `<feSpecularLighting>` elements in `<svg>`
Inherited	no
Computed value	as specified
Animation type	by computed value

Formal syntax

lighting-color = 
  <color>

Examples

Defining the color of filter lighting

This example demonstrates the basic use case of lighting-color, and how the CSS lighting-color property takes precedence over the lighting-color attribute.

HTML

We have an SVG with two <filter> elements, one with a <feDiffuseLighting> and one with a <feSpecularLighting> child. Each includes the SVG lighting-color attribute defining the lighting color as red. Both of these children have a <fePointLight>, the required child that sets the light source. We included two <rect> elements with a filter attribute; this is where the filters will be displayed.

CSS

We define the size and position of our <rect> using the CSS height, width, x, and y properties. We also add a background image to the SVG to make any color alpha transparency more apparent:

We then apply different lighting color values to the filter's child elements using the CSS lighting-color property. We use a named color and a 3-digit hexadecimal color, but we can use any valid CSS color syntax: