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

css
/* <color> values */
lighting-color: red;
lighting-color: hsl(120deg 75% 25% / 60%);
lighting-color: currentcolor;

/* Global values */
lighting-color: inherit;
lighting-color: initial;
lighting-color: revert;
lighting-color: revert-layer;
lighting-color: unset;

Values

<color>

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

Formal definition

Initial valuewhite
Applies to<feDiffuseLighting> and <feSpecularLighting> elements in <svg>
Inheritedno
Computed valueas specified
Animation typeby 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.

html
<svg viewBox="0 0 420 120" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feDiffuseLighting lighting-color="red">
      <fePointLight x="75" y="30" z="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="flood2">
    <feSpecularLighting specularExponent="5" lighting-color="red">
      <fePointLight x="225" y="75" z="5" />
    </feSpecularLighting>
  </filter>

  <rect id="r1" filter="url(#flood1)" />
  <rect id="r2" filter="url(#flood2)" />
</svg>

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:

css
svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #ccc 0px 10px
  );
}

rect {
  width: 100px;
  height: 100px;
  x: 10px;
  y: 10px;
}

#r2 {
  x: 150px;
}

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:

css
feDiffuseLighting {
  lighting-color: blue;
}

feSpecularLighting {
  lighting-color: #f09;
}

Results

The attributes defined the color of both light filters as red, but these values were overridden by the CSS lighting-color values.

Specifications

Specification
Filter Effects Module Level 1
# LightingColorProperty

Browser compatibility

BCD tables only load in the browser

See also