CSS lighting-color Property

Description

The lighting-color property controls the color of the virtual light source used by lighting-based filter effects. It does not change the base fill or stroke of the element itself; rather, it determines the hue of the highlights, specular glints, and the colored component of diffuse illumination produced by lighting filter primitives (for example those used inside SVG filters). Because lighting effects are applied as part of the filter pipeline, the color you choose for the light alters how the rendered surface appears to be lit — warm lights give reddish highlights, cool lights give bluish highlights — without altering the underlying geometry or textures.

In practice, lighting-color is used when a filter chain includes primitives that perform lighting calculations; it defines the color used when computing the illumination that is added to (or combined with) the source graphic. When combined with surface properties like the surface normals and material parameters inside the lighting primitive, the light color defines both the diffuse tint and the specular color of reflections. Because the property affects only the light source, you can achieve effects such as colored rim lighting or subtle tints on a shape’s highlights while keeping the object's base color unchanged.

Use of lighting-color is typically coordinated with the overall filter applied to an element, so it is often considered alongside the element’s filter configuration and the element’s own color styling (for example the color of text or fills) to produce the intended visual result. It is also a useful parameter to animate or vary when you want dynamic lighting — for instance simulating time-of-day shifts, neon glows, or interactive color changes in response to user input — because changing the light color re-tints highlights and reflections in a natural way without altering the underlying artwork.

Definition

Initial value: white
Applies to: <feDiffuseLighting> and <feSpecularLighting> elements in <svg>
Inherited: no
Computed value: as specified
Animatable: by computed value
JavaScript syntax: object.style.lightingColor

Syntax

element { lighting-color: <color>; }

Values

<color>
You can use any valid CSS color:
- Color Keywords: Any standard CSS color name (e.g., blue, darkgreen, transparent).
- Hexadecimal: 3, 4, 6, or 8-digit hex codes (e.g., #f06).
- RGB/RGBA: Functional notation for Red, Green, and Blue channels.
- HSL/HSLA: Functional notation for Hue, Saturation, and Lightness.
- CurrentColor: Uses the value of the color property from the element.

Example

HTML

<div class="container">

  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute;pointer-events:none" aria-hidden="true">

    <defs>

      <filter id="specular-light" x="-50%" y="-50%" width="200%" height="200%">

        <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>

        <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="20" lighting-color="white" result="spec">

          <fePointLight x="-100" y="-100" z="200"/>

        </feSpecularLighting>

        <feComposite in="spec" in2="SourceAlpha" operator="in" result="lit"/>

        <feComposite in="SourceGraphic" in2="lit" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>

      </filter>

    </defs>

  </svg>



  <h2>lighting-color demo</h2>



  <div class="row">

    <div class="card">

      <div class="box" id="box1">Default (white)</div>

      <div class="label">lighting-color: white</div>

    </div>



    <div class="card">

      <div class="box blue" id="box2">Blue light</div>

      <div class="label">lighting-color: deepskyblue</div>

    </div>



    <div class="card">

      <div class="box" id="box3">Warm light</div>

      <div class="label">lighting-color: orange</div>

    </div>

  </div>

</div>

CSS

/* Basic page styles */
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #111;
  color: #eaeaea;
  padding: 30px;
}

.container {
  max-width: 780px;
  margin: 0 auto;
}

.row {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.card {
  text-align: center;
}

.box {
  width: 180px;
  height: 120px;
  background: linear-gradient(135deg, #555 0%, #222 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  filter: url(#specular-light);
  lighting-color: white;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.box.blue {
  background: linear-gradient(135deg, #1e3a8a, #0ea5e9);
  lighting-color: deepskyblue;
}

#box3 {
  background: linear-gradient(135deg, #6b3b00, #ff9800);
  lighting-color: orange;
}

.card .label {
  margin-top: 8px;
  font-size: 13px;
  color: #ccc;
}

.box:hover {
  /* subtle change to lighting color on hover */
  lighting-color: gold;
  transition: lighting-color 240ms ease;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS lighting-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.