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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
lighting-color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also