lighting-color

Syntax

/* <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

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.

<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:

svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #cccccc 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:

feDiffuseLighting {
  lighting-color: blue;
}

feSpecularLighting {
  lighting-color: #ff0099;
}

Results

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

Specifications

Browser compatibility

See also

• color
• fill
• flood-color
• stop-color
• stroke
• flood-opacity
• background-color
• <color>
• <filter-function>
• SVG lighting-color attribute