# Custom shadow shader? Rainbow shadows?

**URL:** <https://discourse.threejs.org/t/custom-shadow-shader-rainbow-shadows/56766>\
**Category:** Questions\
**Tags:** shadows\
**Created:** [October 7, 2023, 10:47pm UTC](https://discourse.threejs.org/t/custom-shadow-shader-rainbow-shadows/56766 "2023-10-07T22:47:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [October 7, 2023, 10:47pm UTC](https://discourse.threejs.org/t/custom-shadow-shader-rainbow-shadows/56766/1 "2023-10-07T22:47:47Z")

</div>

Suppose I want all my shadows to have a rainbow gradient. What’s the simplest way to do that in Three?

I’m guessing its either

- patching the shader to replace the shader code with my own
- using node materials and making my own node to compose with the rest

I’m fairly certain there’s no easier way, but would be pleasantly surprised if there were.

---

<div class="post-metadata">

**Author:** ![DolphinIQ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dolphiniq/32/3510_2.png) [@DolphinIQ](https://discourse.threejs.org/u/DolphinIQ)\
**Post date:** [October 8, 2023, 7:53pm UTC](https://discourse.threejs.org/t/custom-shadow-shader-rainbow-shadows/56766/2 "2023-10-08T19:53:23Z")

</div>

Greetings 👀

The way shadows currently work inside shader chunks [lights\_fragment\_begin](https://github.com/mrdoob/three.js/blob/181e04eea8b569dc09048f9dc644310ed6b745a6/src/renderers/shaders/ShaderChunk/lights_fragment_begin.glsl.js#L145) is the fragment tests for each light whether its shadowed, and then multiplies the light color by a shadow factor of `0.0` or `1.0` accordingly (or something between them in case of edges?).

I suppose instead of just multiplying the shadowed fragment’s light color by 0, you could instead edit the shaders to use that `0.0` to `1.0` shadow factor to glsl `mix()` between standard light color and your rainbow effect color.

Naturally you’d have to write the rainbow color shading function yourself. Perhaps `vDirectionalShadowCoord` can be of use to you.

Either way that sounds like a cool effect. Post a showcase when you get it done 🤩 🌈

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [January 7, 2026, 11:19am UTC](https://discourse.threejs.org/t/custom-shadow-shader-rainbow-shadows/56766/3 "2026-01-07T11:19:15Z")

</div>

I hadn’t gotten around to trying this yet. But thinking that nowadays it’ll be easier with TSL and WebGPURenderer. I wonder what’s the approach (how to provide nodes) for custom shadow with TSL.