Shader Atlas
한국어
◑ Color adjustments

Invert

색상 반전

Invert flips RGB colors while leaving the input alpha unchanged.

Also known as: Invertcolor inversion

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, ImageTexture, Invert } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <Invert />
    </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, ImageTexture, Invert } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/photo.jpg"/>
    <Invert/>
  </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, ImageTexture, Invert } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/photo.jpg" />
  <Invert />
</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, ImageTexture, Invert } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <Invert />
    </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: 'Invert',
    }
  ]
}, { disableTelemetry: true })

Props · Invert

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

This component has no adjustable props.

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

Grayscale흑백 변환

Grayscale removes color and leaves the image in shades of gray.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Solarize솔라리제이션

Solarize inverts tones above a luminance threshold and blends the result with the original.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Posterize포스터라이즈

Posterize reduces the number of visible color levels for a flat poster-like image.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Sharpness선명도

Sharpness strengthens image edges to make details appear clearer.

Bright and dark colors, along with their color relationships, flip like a film negative. Transparent parts keep their original alpha.

This component exposes no adjustment props in the registry. It inverts the input RGB colors while preserving alpha.

Place it over an image, video, or graphic input. It is useful for a strong color change but can be harsh on readable UI or brand colors. Unlike Solarize, it inverts the full color range rather than only a brightness region.

When to use

Use it for negative-like graphics, high-contrast transitions, or experimental art built around inverted colors. Avoid it where accessibility or brand-color consistency matters.

Open as page ↗