Firefox Tomorrow

css property

`lighting-color` CSS property

View on MDN ↗

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

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

This property is specified as one <color> value:

Formal definition

Formal syntax

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

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also