Shader Atlas
한국어
◎ Light & lens

Gradient Map

그라디언트 맵

Maps the source luminance through a color gradient to recolor the image.

Also known as: GradientMapGradient mappingLuminance mapping

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, GradientMap, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <GradientMap />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, GradientMap, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/photo.jpg"/>
    <GradientMap/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, GradientMap, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/photo.jpg" />
  <GradientMap />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, GradientMap, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <GradientMap />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/photo.jpg',
      },
    },
    {
      type: 'GradientMap',
    }
  ]
}, { disableTelemetry: true })

Props · GradientMap

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
palettePaletterainbowrainbow · sunset · ocean · fire · pastel · neon · customBuilt-in cosine palette, or Custom Colors to pick your own stops
colorLowShadows#1a0b2e—Color for the darkest tones
colorMidMidtones#e94560—Color for the midtones
colorHighHighlights#f9ed69—Color for the brightest tones
speedSpeed0.15-2 – 2 (step 0.01)Gradient animation speed (0 = static). The gradient cycles seamlessly.
contrastContrast10 – 3 (step 0.01)Steepness of the luminance-to-gradient mapping
blackPointBlack Point00 – 1 (step 0.01)Input shadow clip — luminance at/below this maps to the start of the gradient
whitePointWhite Point10 – 1 (step 0.01)Input highlight clip — luminance at/above this maps to the end of the gradient
strengthStrength10 – 1 (step 0.01)Blend between the original image (0) and the gradient-mapped result (1)
colorSpaceColor Spaceoklchlinear · oklch · oklab · hsl · hsv · lchColor space for interpolating custom colors

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Chromatic Aberration색수차

Separates the red, green and blue channels so edges show a prism-like color split.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Light Leak라이트 릭

Adds warm, overexposed light that appears to leak into the frame from a film edge.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Contour Lines등고선

Draws topographic contour lines from the input's luminance or alpha.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Glow글로우

Softens bright areas into a surrounding glow with adjustable intensity.

It is like printing a black-and-white photograph with a different ink color for each shade of gray. The source's light and dark structure remains while its color treatment changes.

`palette` defaults to "rainbow" and chooses a built-in palette or custom color stops. With custom colors, `colorLow`, `colorMid`, and `colorHigh` set the dark, middle, and bright tones; their defaults are #1a0b2e, #e94560, and #f9ed69. `strength` defaults to 1 (range 0–1) and blends the mapped result with the original: lower values retain more of the original color, while higher values apply more of the gradient.

Apply it over an image or video; an input with both light and dark areas shows the tonal mapping clearly. It can pair with a vignette or film grain, but avoid changing colors when they carry meaning in a photo or chart.

When to use

Use it for photo and video grading, limited palettes in game or music visuals, and recoloring monochrome imagery with brand colors. Avoid it on charts or status indicators where color communicates data.

Open as page ↗