Shaders
header.lightDarkMode D
Gallery

A pixelated gradient shader effect displaying a smooth color transition from warm yellow and orange tones in the upper left to deeper orange hues in the lower right. The image features a diagonal gradient flow with a pixelated/blocky appearance created by a scale-41 pixelation filter applied over the underlying gradient. The pixelation creates distinct square blocks of varying sizes that form a mosaic-like pattern, with the blocks becoming more pronounced and visible due to the dithering effect applied with a bayer4 pattern using orange (#ff8d21) and tan (#d9c26c) colors in screen blend mode. The overall effect creates a warm, glowing appearance with a retro digital aesthetic. The gradient appears to flow from approximately the center-left toward the bottom-right, with color intensity increasing toward the right side of the composition. The dithering adds a subtle texture and noise pattern throughout, enhancing the pixelated, low-resolution digital art style. The atmosphere is warm and energetic, reminiscent of 8-bit or 16-bit era computer graphics.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Dither,
  LinearGradient,
  Pixelate,
  SimplexNoise,
  SineWave
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SineWave id="idmm6l5eunmmrd5th1v" :amplitude="0.1" :angle="139" :frequency="0.6" :position="{ x: 0.02, y: 0.45 }" :softness="0" :speed="0.2" :thickness="1.2" :visible="false" />
    <SimplexNoise id="idmm5kajmj4uwhjdgmm" :scale="4.3" :speed="0.1" :visible="false" />
    <Pixelate :scale="41">
      <LinearGradient :angle="{ type: 'map', curve: 0, source: 'idmm5kajmj4uwhjdgmm', channel: 'luminance', inputMax: 1, inputMin: 0, outputMax: 360, outputMin: 0 }" color-a="#ce1ea4" color-b="#4a2b2d" color-space="hsl" edges="mirror" :end="{ x: 0.89, y: 0.39 }" mask-source="idmm6l5eunmmrd5th1v" :start="{ x: 0.67, y: 0.48 }" :visible="true" />
    </Pixelate>
    <Dither blend-mode="screen" color-a="#ff8d21" color-b="#d9c26c" :pixel-size="3" />
  </Shader>
</template>