Shaders
header.lightDarkMode D
Gallery

A smooth, flowing gradient shader effect with soft, blended color transitions creating an ethereal, dreamlike atmosphere. The composition features a diagonal flow of colors moving from the upper left toward the lower right. The primary color palette transitions through white in the center, with cyan and light-blue tones dominating the left and upper right edges, while vibrant lime-green and yellow-green hues occupy the center-right and lower portions. The gradient has a liquid, organic quality with soft feathered edges that fade to transparency at the boundaries. A subtle grid pattern with very low opacity (6%) overlays the entire composition, creating fine geometric structure without disrupting the flowing effect. Fine film grain texture is applied uniformly across the surface, adding a subtle cinematic quality and preventing the gradient from appearing too smooth or artificial. The overall effect is soft and luminous, with colors blending seamlessly through the OKLab color space, creating smooth perceptual transitions. The distortion parameter (0.2) introduces gentle waviness to the gradient flow, enhancing the fluid, organic appearance. The mood is calm, fresh, and contemporary, suggesting movement and energy while maintaining visual softness.

Code

vue
<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  FlowingGradient,
  Grid
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FlowingGradient color-a="#ffffff" color-b="#02dee3ff" color-c="#f6ff4d" color-d="#42ff21" color-space="oklab" :distortion="0.2" :seed="86" :visible="true" />
    <Grid blend-mode="multiply" :cells="30" color="#000000" :opacity="0.06" :thickness="0.4" :visible="true" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>